PC GameFinder
As a full-time student in Flatiron School’s Software Engineering Program, I was required to create an app that makes full use of a Ruby on Rails backend. At my last job, I co-led the continued development of proprietary reservation and booking software using Ruby on Rails. For almost five years I heard about it frequently but never worked with it so this was an especially exciting project for me.
As usual, I tried to balance the project requirements with real-world utility. I realized, as an occasional PC gamer, I end up checking multiple online sources when I shop for a game. I set out to make an app to do just that.
Luckily, I found an API that does a lot of the heavy lifting, Cheapshark. This ended up being a lifesaver because we only had a week to create the app, and I was teaching myself React-bootstrap, and only using React hooks for the second time. Not to mention, this was the first app in which I implemented user authentication and authorization.
To prep, I created user stories, which is somewhat familiar from my work in an Intel Corp. UX lab. Next, I developed a simple ERD using dbdiragram.io, which has a fun-to-use free version.
Next, I sketched out workflows for each user story, categorizing them by function. I then built each function out, determined not to create other functionality unless it was required for my current job.
I found setting up Ruby and Rails to be fairly straightforward although figuring out how to persist data into multiple tables with one fetch from the frontend was a little challenging. In this case, I needed to create a game on the backend then use the game’s ID to establish the relationship with an newly-created alert. In order to make it happen, I passed alert and user params alongside game params to the games controller in a single POST request.
On the frontend, React-bootstrap was a blast to work in. Not only did it make formatting game cards a breeze, it let me do cool things, like add modals to set up game price alerts.
The nav bar was also a breeze to set up. Toggling Login/Logout and Register/Account links using a ‘loggedin’ state variable was fairly straightforward, as was the combination of a useEffect fetch to ensure authorization and ternary statements in React Router.
Finally, deploying an app to both React and RoR to Heroku at the same time was a bit of a challenge. I used Postgresql for the first time, as Heroku doesn’t host SQlite, which is what I used for previous projects. After quite a bit of reading I got the frontend and backend to communicate. However in that process, a router link to a page in the front end was picked up by the backend so that any navigation to my alerts react page triggered my alerts#show on the backend instead, giving the user a face full of JSON. To fix that, I ended up changing the route name on the front end though I read about a method of excluding frontend routes from controller processing. I opted for the easier fix.
All of the links to game deals work and alerts persist although the actual alert function, which is built into the Cheapshark API is disconnected at the time of this writing, to allow for testing.
I believe this app has a lot of value in production once I connect alerts, add additional deal information, expand the search function and optimize for SEO. Also, I now have a go-to app to quickly find the best online deals for my next PC game.