Description

As a vivid speedrunner of the game Quantum Conundrum, I always had a desire to have a clear overview of the fastest times for each level. Ideally, with a link to a video of how such time was achieved. This overview has had many iterations, with this version as the last.

It not only tracks the best times that have been set, but also the least "shifts", which is a challenge to use a key gameplay element as little as possible.

The best times are pulled from speedrun.com using their API and stored in a database, as a cache of sorts. The least shifts are added manually, also kept in the database.

My responsibilities

Retrieving data from API

First thing I had to do was figure out how the speedrun.com API works. Fortunately, their API is well documented and easy to work with. We simply start with retrieving all levels, and retrieve the runs performed for each level. To keep things performant, we only do a complete update periodically. Users can request an update for a level if it hasn't recently been updated. I also keep track of the last update timestamp, so I only have to retrieve updates since that last timestamp.

SQLite Database

The retrieved data is stored in multiple tables. For each level, we then retrieve the top 3 fastest runs with some fancy querying (and a bit of additional filtering afterwards). We also have a table with user data, which we can link to the runs. I haven't bothered doing this in the database, and find matching users in my code instead.

Visualizing

The front-end retrieves the formatted data from the database using a custom REST API. It's then visualized using React, where I have not used any additional pre-fabricated UI. Both the graphs and the table are completely custom SVG/React implementations.

Retrospective

If I were to continue working on this project, there's at least two things I would like to pick up:

The "full run" page is still empty. It would be really motivating for runners to see who's at the top, with which time. I would probably create tabs with each category and display the top 3 runners in a large graphic, potentially with other runners below (perhaps limiting it to a top 10).
Performance could be better. Right now, there's a brief moment where the table has no data when loading. I find this visually jarring and would rather optimize it so that it's already filled right when the page loads. I could use server-side rendering with Next.js, although that would mean a pretty significant change in architecture. The easier option would be to simply load the data sooner, or perhaps in smaller chunks so that the first meaningful paint happens sooner.

However, I'm quite satisfied with the web app as it is now. It's functional and aesthetically pleasing. Given this was just a quick project, the outcome is quite delightful if I say so myself.

Quantum Conundrum Leaderboards

Project type

Platform