DEV Community

Cover image for Organise your video game backlog using Trello
Emma Goto πŸ™
Emma Goto πŸ™

Posted on • Edited on • Originally published at emgoto.com

Organise your video game backlog using Trello

If you play video games on the PC, I’m sure you can relate to the feeling of having too many unplayed games sitting on your backlog (and somehow you never know what to play πŸ€”). And then each time a Steam sale rolls around, your list just continues to grow.

If you’re looking for a way to organise your backlog, and you want to use Trello to do it, I have the solution for you!

I recently released Gaming Backlog which allows you to connect to your Steam account and easily bulk-add games as cards to your Trello board πŸŽ‰

I can’t guarantee that using this will make your backlog any smaller, but it will make for a very pretty-looking Trello board that you can stare at when you’re looking for something to play.

Troubles with authentication and Steam

This side project turned out to be a lot harder than I thought it would be (don’t they always). I was rendering everything in an iframe on the Trello board, but Steam authentication won’t run in an iframe (I assume for security reasons) so I had to pop open a new window, have the user authenticate, and then redirect back to the Trello board.

I detailed some of the authentication gotchas in another post last month here:

One of my biggest surprises is that authenticating with Steam doesn’t really grant you anything. It returns you the user’s SteamID, but this ID is public information that you can get from a Steam user’s profile. The only benefit it really provides is a β€œsmooth” way of getting a user’s ID, instead of making them jump through hoops to get it for you. Unfortunately that also means when you call the Steam API to grab a user’s games, their profile needs to be public. Luckily most people seem to leave their profiles public by default, so I'm hoping this isn’t too big of an issue.

You can sort your Steam games by alphabetical order or by hours played

Architecture

Everything that renders on your Trello board is from a static site I hosted on Github Pages, while the authentication flow and the calling of the Steam APIs is handled by an Express.js app hosted on Heroku. Could I have done this all on the one app? Yes, but to be honest I don’t really know what I’m doing so my Express.js code is like a house of cards that I'm afraid could fall down at any second! I don’t trust my free Heroku plan to give me 100% uptime either, or to be very fast, so I split it out into two apps to try and mitigate this risk if it does go down.

What’s next?

For now I will leave this Power-Up as is and see if it gets much usage. The Steam API does provide a way to grab a user’s achievements for a particular game, so the next feature I might add is the ability to add your achievements as a checklist on your Trello card.

If you do decide to check this out, please let me know how it goes, as it hasn’t been extensively tested beyond me adding my own games to a backlog.

Thanks for reading!

Top comments (11)

Collapse
 
nazimboudeffa profile image
Nazim Boudeffa • Edited

Very interesting new way of playing games, it reminds me when I used to draw maps to play Zelda ALTTP, and actually I need something like this to play Might and Magic X Legacy, recently after the launch of GForce Now I have started a mini project to let someone manage some info on his owned games, I have first started with grabbing the images of all the games in python and then display them with an expressjs app. It actually works only with Steam because there is an API

I am now working on the next steps so maybe I can use your idea in this way

For the issues I have noticed that the games are not added automatically to my board, so I have just added Mortal Kombat X manually it serves for my project as a testing app on GForceNow because of my ULTIMATE controller next buy (joking)

github.com/nazimboudeffa/geforceno...

Collapse
 
pixeline profile image
Alexandre Plennevaux

Nice job! I just noticed that on the powerup page at the bottom, the twitter account is incorrect :-)

Collapse
 
emma profile image
Emma Goto πŸ™

Oops, thanks for that!

Collapse
 
pixeline profile image
Alexandre Plennevaux

I wonder what it takes to create a Trello Powerup. would you care to share your experience ?

Thread Thread
 
emma profile image
Emma Goto πŸ™

All it requires is some JavaScript and HTML knowledge, and then you can get free hosting using something like Github Pages or Netlify. The Trello team has put together a pretty good tutorial here:

tech.trello.com/power-up-tutorial-...

They've also got a couple of fully functioning power-ups you can take a look at the code for:

glitch.com/~trello-react-power-up
glitch.com/~trello-power-up

You can store about 4000 characters worth of data on each card (as well as some storage on the board itself for stuff that's not specific to any card) so depending on how simple your power-up is, you might not even need a backend or a database to store anything (which is great for me as a mainly frontend developer).

There's less than 200 Trello Power-Ups available right now so I think it's a great time to get in and build one while there's still so many unexplored opportunities!!

I don't know if I've really answered your question but let me know if there's anything specific you wanted to know πŸ™‚

Thread Thread
 
pixeline profile image
Alexandre Plennevaux

It's very useful, thank you !

Collapse
 
mskog profile image
Magnus Skog

This would be a great fit for my own Trello gaming backlog! Thank you!

Collapse
 
emma profile image
Emma Goto πŸ™

No worries, I'd love to hear how it goes!

Collapse
 
ryandotfurrer profile image
Ryan Furrer

Wow, this is awesome - nice work!!

Collapse
 
beznet profile image
Bennett Dungan

So cool! Going to test this out over the weekend

Collapse
 
emma profile image
Emma Goto πŸ™

Thanks so much!