A web app to convert player ranks between Valorant and League of Legends by percentile
Motivation
As an avid League of Legends player, I would often find myself curious how my rank compares to friends who play Valorant, and vice versa. These games are both developed by Riot Games, but their ranked distributions are not exactly the same - for example, there was a time when Radiant (Valorant's top rank) consisted of 0.3% of the playerbase, while Challenger (League of Legend's top rank) consisted of only 0.02%.
Technologies
Problem
I never found an easy tool to compare the two games. Oftentimes I would have to look up the leaderboards and do some math myself.
Solution
I saw that a lot of this information did exist online, even if it wasn't directly provided by Riot's API. It provided me an opportunity to build something to make the whole process easier.
Software Architecture
Before diving into this app, I wanted to figure out which essential functions I would need. I was able to narrow it down into 3 separate services:
1. A web-scraping service
2. A database service
3. A frontend UI
Another key concern of mine was being able to achieve $0 cloud hosting costs.
With this in mind, I narrowed my tools down to the following:
1. Azure Container Apps
- - for quick, scheduled processes like my web scraping service - with all costs covered by Azure's free credits
2. Supabase Free Tier
- - for a free, managed database
3. Vercel Hobby Tier
- - for free hosting of my NextJS frontend
Web Scraping Service
For my web-scraping, I created two services: league_data and valorant_data. Both of these use NodeJS and Puppeteer for web scraping and use Supabase's NodeJS library to store the data they retrieve. They both function very similarly, too, with the following structure:
1. Scrape data from target page
2. Process and structure the data
- - also calculates a “cumulative percentile” rank to act as a baseline
3. Prepare the data and insert the data into database
4. Catch and log any errors
Database Service
The database service is quite simple, as it's managed by Supabase. I created the tables and their assorted data using Supabase's web UI and connected to it using their NodeJS library.
For simplicity's sake, and because the data I'm storing is all publicly available anyway, I enabled read-only access to the database. This made it possible for my frontend to query the database using a public key, rather than needing to run on its own server to obscure a secret key environment variable.
Frontend UI
The frontend for my app was created using NextJS and MaterialUI. The purpose of my app was to be a very simple tool.. It features a single index page with a dropdown menu and toggle window between games. MaterialUI was great as it comes with a lot of components to choose from. NextJS was mainly chosen due to familiarity and free hosting on Vercel.
Takeaways
This project gave me opportunities to dive deeper into web-scraping, containerization, and Azure services. It also served as an interesting opportunity to research tools based on cost benefits, and I was ultimately successful in hosting this project free of personal charge.
The technology I'm most proud of learning from this project, though, is definitely Azure's Container Apps. It was a little confusing at the start, and a lot of their official documentation wasn't working properly for me, so it required some extra research. In the end, it helped me save a lot on hosting costs versus hosting a permanent server.
Ultimately, this project allowed me to gain experience combining technologies I previously learned - such as web-scraping and containerization - and also research new technologies like Supabase and Azure Container Apps.