Press Start
Designed and developed a full-stack web app that helps users keep track of their video game collection so they can decide what to play next.
<Contents>
<Projects>
<Overview>
Press Start is a web app that helps gamers manage their video game collections.
Gamers today have more options than ever. With PlayStation, Xbox, Nintendo, and PC all having both physical and digital games, it gets hard to keep track of all the games you own. I can't be the only one who has bought a game from a digital store because I saw a sale only to completely forget I own it. Needless to say, my backlog only seems to grow and I'm stuck in a pattern of just playing the most recent game I bought.
My solution to this issue is Press Start - a web app that helps users keep track of the games they own so they can easily decide what to play next.
<Toolkit>
- React
- JavaScript
- SCSS
- Node.js
- Express
- MySQL
- Knex
- REST APIs
- IGDB API
- Figma
- Responsive Design
<Metadata>
Completed
2024
Timeline
2 weeks
Role
Designer, Developer
<Features>
Here are some of the key features that make managing your game collection and discovering new titles easier than ever.
Keep track of the games you own.
Easily add games to your collection and note which console they're for, whether they're physical or digital. It's a great way to keep everything organized!
'%3e%3crect%20width='712'%20height='24'%20fill='%230C0C34'/%3e%3ccircle%20cx='12'%20cy='12'%20r='4'%20fill='%23AB1C4E'/%3e%3ccircle%20cx='28'%20cy='12'%20r='4'%20fill='%23CC821B'/%3e%3ccircle%20cx='44'%20cy='12'%20r='4'%20fill='%2327A26D'/%3e%3c/g%3e%3crect%20x='0.5'%20y='0.5'%20width='711'%20height='23'%20stroke='%230C0C34'/%3e%3cdefs%3e%3cclipPath%20id='clip0_462_129'%3e%3crect%20width='712'%20height='24'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
Manage games in your collection by keeping track of play status.
Setting the play status lets you quickly filter for games you want to play to you can dive in to your next adventure sooner.
Filter games in your collection decide what to play next.
Right now, users can filter by status and console, but I'm working on adding more options (like genre or estimated playtime) so you can really narrow down what you want to play next.
Discover new or upcoming games.
The explore page lets you browse through games by platform or see what's coming soon. It's the perfect way to find your next adventure, whether it's a new release or something you missed.
<Challenges>
This project pushed me to explore new skills and tackle challenges I'd never faced before, making it a valuable learning experience.
Backend Development
This was my first experience structuring and building a backend, and it required a lot of problem-solving on the fly.
Challenges & Solutions
Structuring a database and building a proxy server for the first time.
Focused on getting a working solution by experimenting with different approaches and refining based on trial and error.
I didn't really have a clear plan or idea on how to create a scalable system, so I focused on making things work. While it wasn't the most elegant solution, it gave me a better understanding of backend development and showed me the need to learn more about backend design patterns and planning strategies. This experience also made me realize how important it is to manage the single source of truth when working with data.
Filtering Data
Filtering was a new challenge for me, and my initial solution could definitely be better.
Challenges & Solutions
Managing filters with data coming from both the database and the API.
While my current solution works, I've identified ways to make the filtering logic more modular and scalable for future improvements.
My filters pull options from the API, user collections, or both, but right now, the options are sourced from multiple places. I plan to go back in and consolidate everything into one central source for the filter options. This would simplify the logic, improve consistency, and make the system easier to maintain.
API Integration
This was the most robust and complex API I've worked with, requiring me to retrieve and clean large amounts of data.
Challenges & Solutions
Working with a complex API to retrieve and clean large amounts of data.
Tested API requests with Postman and iteratively refined filtering logic to address specific use cases.
Managing this API was a challenge. I had to extract relevant data while ensuring it aligned with the site's goals. For example, I initially filtered explicit games by excluding certain themes and null age ratings. However, when working on the Explore page for new releases, I discovered that unreleased games often didn't have age ratings either. This led me to adjust my API calls to include unreleased games without age ratings, while excluding games with no release date or ratings. Though not a perfect solution, this approach worked within my timeline and gave me a deeper understanding of the complexities involved in robust API integrations.
<Retrospective>
This project introduced me to backend development—designing the database, building a server, and integrating a complex API. I had to quickly learn backend essentials: creating a database schema, building a proxy server, and handling API integration.
Filtering data from both the database and API was more complicated than expected. I realized the importance of having a clear plan for data flow from the beginning. The lack of structure made it difficult to integrate filters effectively, which caused unnecessary complexity.
The complexity of the API was another significant challenge. Extensive testing and refining of the API calls were necessary to meet project goals. Working with this API taught me how crucial it is to understand its structure and data flow early on, which would've saved time and effort in refining requests.
This project pushed me out of my comfort zone and made me rethink how I approach backend work and complex APIs. It wasn't perfect, but I've learned where to be more strategic and where to clean things up. Next time, I'll have a clearer plan from the start to avoid repeating the same mistakes.
<Road map>
I'm looking forward to keeping this project going, with the hope of eventually deploying it.
So, what's next for Press Start?
- Refactor code for scalability.
- Add user authentication.
- Expand filters and sorting options.
- Add franchise tracking with release alerts.
- Improve responsive design.