A minimal and elegant endless-scrolling website to view anyone's TF2 inventory, with no extra bs or signing in required. It allows searching for item names and filtering by class.
View your items here! 🎩I had been doing many Svelte tutorials and felt pretty confident with my skill and understanding of it, but I needed to make my own project from scratch to oficialise it. I had the idea of creating a Team Fortress 2 item explorer because it would use everything I had been learning:
On top of this, I also wanted a way to view my entire TF2 inventory in one go, and not only is every other TF2 backpack viewer paginated, they’re also slow, ugly, and usually require signing into your Steam account.
I started with creating the Flask backend to fetch the API data: which would prove to be the hardest part. I started by trying to use Valve’s official SteamAPI, but it returns data in a very barebones compressed way, including only IDs and references to a schema file, making it a nightmare to work with. Then I found an API endpoint on stackoverflow that returns the data with the full text values and images, alongside their appropriate colours. This was a god-send, but it had a major drawback: it’s heavily rate-limited, with 3-4 consecutive requests being enough to get a null response timeout.
Due to this, I ended up creating a caching system. After fetching a user’s data and formatting it to my needs, I save it to disk as a JSON, including its hash and time of update. Then when a user requests backpack data from the website, I load it from disk instead of making unnecessary API calls. In case the data doesn’t yet exist on disk, I obviously do fetch it and create it. I also check when the last update was made, to make sure they don’t become too out of date. Currently it’s set to refresh every 24h which I believe to be more than reasonable.
If I had tens of thousands of users, I might have to move to an external database like Firebase for this to avoid flooding my Linux VM Server. But I don’t, so it works perfectly :)
The Svelte part of this had its own challenges, namely how to display the tooltip at the exact mouse position. It’s its own component with absolute positioning set to the mouse position, accounting for window scrolling. Organising the filtering system to allow both searching of item names and character classes simultaneously was tricky as first, but I arrived at a clean solution using reactive values. The biggest challenge was probably how to hold the website together while waiting for the Promises to resolve. I ended up displaying the Item grid only if the items array and the user profile section had any values; otherwise I’d display the running scout gif as a cool loading screen.
Error handling was also implemented, with the Flask backend sending an error msg in the JSON request detailing what went wrong (profile not found, private profile, misc error), and Svelte displays that info with a sad heavy gif to the website user.
To sum it up: backend powered by Flask, front-end powered by Svelte, CSS powered by Sass, and Steam data powered by SteamAPI and steamcommunity.com. TF2 is property of Valve Software.
Check out the source code