For my fourth project at Flatiron school, I was tasked with building an application with an HTML, JavaScript, and CSS frontend and a Rails API backend. All communication between the two would be through JSON fetch requests. The project also needed to be a Single Page Application (SPA). I decided to display some local brewers and their beers.
For this project, I would be using two repositories. One for the frontend and another for the backend. Rails generators simplified things by automating a lot of the initial setup. For example, (rails new {project name} –api) generated the folder structure leaving out the items that would not be needed for an API such as views.
Another requirement was that the application must use Object-Oriented JavaScript (classes) to encapsulate related data and behavior. I found this part to be particularly challenging since it was my first attempt. The relationship in this project was that a Brewer could have many Beers. Setting this up in an object-oriented manner required having a Brewer class js file and a Brewer API js file and matching two files for the Beer class. This was in addition to the standard Index file.
The SPA needed to function in a way that the information would change on the page without reloading the page. This required manipulating the DOM to provide all the different displays. Once the information was fetched from the server for each class, it was stored locally in an array. This made it easy to sort and redisplay the page without having to make additional fetch requests to the server.
In the end, this turned out to be a great learning experience. Getting everything working together often required line-by-line debugging to find out why something was not providing the result that I expected.
Top comments (0)