As gamer myself, I’m used to keeping track of the games I’ve owned or those I plan on acquiring. A long time ago, I’ve even owned a notebook where I’d write down reviews and codes for those games as a hobby.
While preparing myself for my 4th Flatiron portfolio project, that old game tracking habit came to mind almost immediately and now I know a tech stack that allows me to do it in a way more practical method.
That’s what my project, Gammax, allows me to do.
Starting off by building my very first Rails Restful API from scratch, I’ve kept it simple by building 2 models: Game, which has_many :comments, and Comment, which belongs_to :game.
The controllers consists on creating, reading and deleting both objects. For easily rendering data into JSON format, I have applied serializers to both controllers:
Finally, the database was set up as seen on the schema file below:
That was it for the backend/API.
Moving on to the frontend and being introduced to JavaScript, there was a quite a bit to grasp, such as asynchronous JS (which makes the Single Page Application possible without having to refresh the page to update it), DOM events/manipulation (documents that can be controlled and modified by the user through the browser), the fetch method (responsive for sending data to the backend) and JSON format rendering (text data type sent from the server, displayed as key-value pairs).
Starting from the JS Game class, I have build my constructor to set the properties to the Game object.
The first method submits the created game in the form (created with Bootstrap on the index.html file, with the game object having stringified properties being rendered, after the renderGame being created and called.
Some of these variables being imported form the index.js file:
As presented above, the file contains the URL for both classes, along with the property variables calling the getElementById, where the element is a reference to its object.
The fetchGames method is next, fetching the gamesURL of the submitted object and returning a new instance.
Now, we need to visualize what was submitted. Since the renderGames method happens to be a huge block, instead of posting its screenshot, I find more viable sharing it through this GitHub link, along with the whole code base: https://github.com/Roeck/Gammax.
The last CRUD (more like CRD on this case) method, is very straightforward:
Done with the Game class. Now, it’s time for its comments.
As before, the essentials come first: The constructor the the instance creator.
Let’s now POST/fetch that data and its single text attribute:
Next up, the trickiest method, which relates directly to the elements. Right before the method for deleting comments:
That was it!
For conclusion, I have learned how to set up a full stack application by setting up a client and server sides communication through fetching data via AJAX calls. Some styling improvements are on the way as well.
