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.
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)
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...
Nice job! I just noticed that on the powerup page at the bottom, the twitter account is incorrect :-)
Oops, thanks for that!
I wonder what it takes to create a Trello Powerup. would you care to share your experience ?
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 ๐
It's very useful, thank you !
This would be a great fit for my own Trello gaming backlog! Thank you!
No worries, I'd love to hear how it goes!
Wow, this is awesome - nice work!!
So cool! Going to test this out over the weekend
Thanks so much!