Steam Game Compiler

Game cards are sorted by rating.
Misspelled input still suggests the correct game title.
Mouse is hovered over the game card.

Inspiration

We wanted a way to look at popular games without worrying about what games Valve is selling to us. A lot of times, steam makes it purposely difficult to find this information. Looking at just the ratings, amount of players playing, and recent news about the game is what we wanted. This was made to make it convenient for gamers to look at popular games with a good UI.

What it does

We designed an application that allows users to easily access information about Steam games. Users can search up games through a fuzzy search engine and add them, allowing them to access information such as an exact positive to negative review percentage, developer, news link, live player count. Users can remove games from their list and sort their games alphabetically and by rating. For example, a friend may recommend a game list, which allows a user to look at their review scores and live player counts to decide whether to buy them or not. Maybe a game is more or less active than expected, or has a positive or negative review score. This application even makes it helpful to make and share general lists between users.

How we built it

We built a frontend with React that handles searching games and adds them to the current game list, along with deleting them and displaying all the information. We implement the Fuse fuzzy search engine in order to get the top three results similar to what the user wants in case they misspell or do not have the full title. For handling API requests with steam’s API, we created a flask app with custom endpoints in order to access the Steam information, along with ngrok internally to make sharing the endpoints easier. Also, we used a python script to cache steam’s entire game list names and ids due to its enormous size of over 500,000 lines of JSON.

Challenges we ran into

One challenge we ran into was that we were not able to access Steam’s API directly due to a CORS error, so we had to create a flask app, which is something we all had no experience with. Another problem was that Steam’s API documentation was very poor, making it very difficult to find API calls that would give the exact information we wanted. There was also not an API call to search with terms, so we had to create another way to get around this. Due to the huge line count of over 500,000 lines of JSON information for a request to get steam names and ids, we created a python script to cache this information. We also implemented the fuse fuzzy search engine library in order to get the top three similar results due to this challenge. We also had limited experience with React, so it was a challenge dealing with it, especially with its asynchronous nature and displaying elements once they were returned. Also, formatting components in CSS to be pleasing to look at and clean required a lot of difficulty, trial and error, and help.

Accomplishments that we're proud of

We are proud of its professional nature, as we struggled but succeeded in making it look visually appealing and easy to navigate and use. We also were able to work together and used a git repository, and we were really happy that we could collaborate well together. We were able to do much more than we planned out, and we learned a lot. Additionally, we were proud of our creative workarounds. When going through one of the APIs returned JSONs was too slow, we came up with the idea of caching it through a python script. Furthermore, when we were having CORS issues we did not give up and were able to use a flask server which was out of our comfort zone.

What we learned

We learned how to work with React, including how it worked with functional components and how to deal with its asynchronous nature. We feel like we have a better understanding on how to add and implement different components into a React application, along with implementing APIs with fetch. We also learned how to set up a Flask app as a backend to be able to get around CORS errors, which is something we have never dealt with before with APIs. We also had experience implementing other libraries such as Fuse’s fuzzy search. We also learned how to add nice looking CSS that allowed us to create a professional looking application and have interactibility with hovering over game cards.

What's next for Steam Game Compiler

We would plan to implement an account system where users would be able to create multiple custom lists of steam games to share. It would be helpful to be able to group games by different elements such as price. We would also create a sharing system that allows users to import other users’ lists. We also would implement a more professional dropdown menu and an animated carousel of images. We would also allow drag and drop for the different games to allow better customization.

Built With

Submitted to

HackUCI 2022
- Winner Hacker's Choice

Created by

I worked on the frontend with React, and getting the search queries working with fuse.js. I also worked on styling the website with CSS, and adding the interactive functionality of adding new cards and removing cards from the list.

Tanush Goel
I worked on creating the initial layout and format of the game cards, formatting the information returned by the API calls, creating the python script in order to cache the games to id json (500,000+ lines), and connecting up our fuse.js fuzzy search engine to the API fetches.

Justin Liao
I worked on creating a flask app to handle all the API requests to Steam's API. I also worked with React on features such as sorting the games alphabetically and by rating. I also helped with the CSS styling for the game cards and the overall application.

Jake Gerber
I worked on front end and almost solely on designing and formatting the user interface using javascript (jsx) and css. I created the formatting for the individual cards as well as the website as a whole using flex boxes. I also made major graphic design choices (such as color, font, etc.) and implemented some button functionality (the search button on the left).

Kevin Liu