Overview
Lets someone enter a Steam64 ID and inspect the account information that Steam makes available, including profile details, recently played games, most played games, and friends. The page also includes sample users, error messages, and guidance for finding an ID or changing privacy settings. This browser interface requests the data from a custom backend using Node.js and express, which retrieves it from Steam's web APIs. Started before my university studies and before any useful AI coding assistance was available.
Architecture & Implementation
The Steam page is rendered as a Handlebars view and enhanced in the browser with JavaScript. The interface has three navigation areas (User Info, Help, and About) and a search form for Steam64 IDs. Selecting one of the sample users provided fills the search field, while the client controls loading animation, error states, profile visibility, status labels, and the displayed sections.
flowchart LR
ui[Browser interface]
subgraph backend[Express backend]
profile[Profile summary endpoint]
recent[Recently played endpoint]
owned[Owned games endpoint]
friends[Friend list endpoint]
end
steamapi([Steam Web API])
ui --> profile
ui --> recent
ui --> owned
ui --> friends
friends --> profile
profile --> steamapi
recent --> steamapi
owned --> steamapi
friends --> steamapiThe Express backend exposes four data endpoints. One retrieves a player's profile summary from Steam's web API and maps the response to fields such as persona name, avatar, status, creation time, visibility, current game, and last logoff. Another fetches recently played games, and a third fetches the full owned games library, filtering out games without playtime or an icon and sorting the rest by total playtime. The browser limits the most played display to the first 50 returned games and formats playtime as minutes or hours.
A fourth endpoint first retrieves the friendlist's Steam IDs, then resolves the account details for the searched user and each friend through the same profile summary logic. It handles hidden friend lists separately and waits until all the asynchronous name and avatar lookups have completed before returning the assembled names, IDs, avatars, account status, and user profile data. The client renders friends as selectable entries that can place a friend's ID back into the search field.
The Steam API key is read from an environment variable and the backend utilities handle unsuccessful responses, parse JSON, and return specific error messages. The profile summary logic also retries Steam rate limit responses and empty player results before reporting an error.
contact@ericjansson.com
