[](http://www.indiedb.com/games/friendship-club/news/steam-early-access-out-now)
<center>[Click here to test this app.](https://steammates.herokuapp.com/)</center>
<div class="text-justify"><strong>Steam</strong> is a great digital distribution platform but it is really bad when it comes to navigating through your purchased games. There is no easy way to filter your library by genres for example, which is really frustrating. <strong>SteamMates</strong> doesn't yet resolve that problem but it resolves another one that frustrated me so much that I felt like I was being forced to make this project. Two weeks ago, just like so many times before, me and my friends wanted to play a game but we didn't know what to play. We ended up not playing anything because of that. We have hundreds of games and yet it always feels like none of these games are multiplayer. That's because it's hard to look through a library without any useful filtering, the custom categories can only get you so far. With a LAN coming soon, I took it upon myself to create <strong>SteamMates</strong>.</div>
___
## What is SteamMates ?
<div class="text-justify"><strong>SteamMates</strong> is an Open-Source project that aims to make it easier than ever to filter through your games and find games you and your friends can play together. Four filters are currently available: <strong>Online</strong>, <strong>LAN</strong>,
<strong>Multiplayer</strong> and <strong>Co-op</strong>. Those can create all the tags required to find games to play together. For example, <strong>LAN</strong> and <strong>Multiplayer</strong> will search for <strong>Local Multiplayer</strong> games in your libraries. Once on the main page, you will be presented with a text field asking you for a steamid64 or a custom URL. Do as asked and then click on the <strong>Add</strong> button. Repeat this operation for as many users as necessary. Once you are done with adding players, hover over the <strong>Start analyzing</strong> button to choose what to filter. Then click on the button and wait for the magic to happen ! This might take some time, I will work on adding some spinners as soon as possible so the user doesn't think the app crashed.</div>
<br>
<div class="text-justify">Here are some screenshots of what the user interface looks like. As you can see from the second screenshot, I'm not really good at design yet. I can't really say the rest of the design is my idea either since it was made to look like the <strong>Steam</strong> interface.</div>
### Home page
### Result page
______
## What's coming next ?
* ##### Removing a player
You may slip when writing a custom URL and end up with someone completely unknown to you. This will fix this problem by simply letting you remove the player.
* ##### Adding some spinners
I will add some spinners for the profile pictures of the home page and for the table of the result page so that the page doesn't look like it crashed when getting the data takes too long.
* ##### A better result interface
Let's face it, it looks like shit right now.
* ##### Filtering games by genres
While I'm already happy with what **SteamMates** can do, an additional filtering by genre would be neat ! It would however require me to rewrite all the querying logic parts so that I don't call the **SteamSpy** API too often.
* ##### Extending to filtering games from one library only (in the future)
While it would be possible thanks to the point mentioned above, I'm thinking of making another interface specially for that. It would ultimately be your Steam library but with filters. I might as well make that into another project because it doesn't fit the theme of **SteamMates** that well. The theme being 'easily finding games to play **with your friends**'.
* ##### Any idea ?
If you have any idea, be sure to share it below or, if it's a somewhat big idea, make a post about it.
______
## Demo and contributions
<div class="text-justify">You can find a live demo of this project <a href="https://steammates.herokuapp.com/">here</a>. If you want to contribute to this project or talk about an issue it has, feel free to visit its <a href="https://github.com/RagePeanut/SteamMates"><strong>GitHub</strong> page</a>. You can also clone it and follow the instructions wrote there to get it running. My social medias are listed at the end of the <strong>README.md</strong> file. If you add me on <strong>Steam</strong>, tell me the reason why on my wall, otherwise I won't accept your friend request.</div>
___
## What did I learn with this project ?
<div class="text-justify">Now is the moment to talk about what I learned from this project. I believe that any project should make you learn at least one thing. It could be something meaningless but what's important is to learn by making. This project is written in <strong>Node.js</strong> for the back-end and <strong>Angular</strong> for the front-end, a combination I really like and I have already worked with for some time now. As usual, I don't write pure <strong>CSS</strong> because I fell in love with <strong>SASS</strong> many years ago. I still write in pure <strong>HTML</strong> though, maybe I should give <strong>Pug.js</strong> a try for my next project... I learned quite a lot with this project, more than I expected actually.</div>
* I learned of the existence of **CORS**, how painful it can be and how to avoid any problem by querying through a proxy instead of directly from the front-end.
* I learned how to interact with the **Steam** web API, a great API for web developers who want to interact with this service.
* I learned how to interact with the **SteamSpy** API which was so necessary to this project. Thanks for allowing developers to interact with your API, much love !
* I **finally** learned how to use **Git**. It was becoming too painful doing everything by drag and drop, why didn't I learn it before ?!
* I learned how to host a **Node.js** app on **Heroku** and how to create environment variables so that my API key stays safe.
* I became better at using **Angular**, particularly everything that had to be written in the **HTML** file of components (data binding, ngModel, ngFor, ngIf...).
<div class="text-justify">Some of the things listed might feel too easy to you but I'm on my second year of studying programming, I need to learn those kinds of things before going any further ! If you've come this far in this post, thanks for reading ! I hope that you like this project, feel free to talk about it and share any idea you might have in the comments section !</div>
___
<center>**The header image is not my original work. See the source by clicking [here](http://www.indiedb.com/games/friendship-club/news/steam-early-access-out-now) or on the image itself.**</center>
<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@ragepeanut/introducing-steammates-easily-find-games-you-and-your-friends-have-in-common">Utopian.io - Rewarding Open Source Contributors</a></em><hr/>
hiveblocks