← Back to projects
★ Featured

Steam Tierlist Generator

A web application for creating custom tier lists of your Steam game library. Import your games from Steam and organize them into customizable tiers using a drag-and-drop interface.

Next.jsTypescriptReactTailwind
Demo

Overview

Steam Tierlist Maker allows users to visualize their game preferences by ranking games into tiers. The application integrates with the Steam Web API to fetch game libraries and provides tools for customization and export.

Features

  • Steam Library Import: Two import methods available
    • Standard import using public Steam profile
    • Family sharing import with Steam Web API token for access to shared libraries
  • Drag and Drop Interface: Organize games across tiers with sortable positioning
  • Tier Customization: Modify tier names, colors, and add custom tiers
  • Game Library Management: Filter and sort games by name, playtime, or hide unplayed titles
  • Image Export: Export completed tier lists as PNG images
  • Local Storage: All data is stored locally in the browser with no server-side persistence
  • Privacy-Focused: Steam API tokens are used client-side only and never transmitted to external servers

Technology Stack

Frontend Framework

  • Next.js 16.1.6 with Turbopack
  • React 19
  • TypeScript
  • Tailwind CSS

Key Libraries

  • @dnd-kit for drag-and-drop functionality
  • html2canvas for image export

APIs

  • Steam Web API for game data

Usage

Importing Games

  1. Click the “Import Steam Games” button
  2. Choose import method:
    • Standard: Paste your Steam profile URL or Steam ID (profile must be public)
    • Family Sharing: Enter your Steam Web API token from the points shop configuration endpoint

Creating Tier Lists

  1. Drag games from the library panel to tier rows
  2. Reorder games within tiers as needed
  3. Use the settings panel to customize tier names and colors
  4. Add or remove tiers according to your needs

Exporting

Click “Export as Image” to generate a PNG image of your tier list. The export captures the current state of all tiers and their games.

Privacy

  • All tier list data is stored in browser local storage
  • Steam Web API tokens are used client-side only and are not persisted
  • No user data is transmitted to external servers
  • Game images are loaded directly from Steam’s CDN

Browser Compatibility

The application works best on modern browsers with support for:

  • ES6+ JavaScript features
  • CSS Grid and Flexbox
  • Local Storage API
  • Canvas API