Javascript and Rails: Universal Catalog

Posted by Chris Ashman on August 27, 2020

Everyone in the world has to make decisions, whether its choosing a movie, picking out the right clothes for an event, picking players for a team, the list goes on. We become indecisive, can not make choices, and we become stuck in a neverending world of not deciding on the simple things until now. For my javascript/rails project, I have created a Universal Catalog. It is a catalog that can be used to hold anything: movies, foods, television shows, furniture you name it. As the example for the project I am doing food, but you can add anything. This project encompasses what I have learned about Javascript in the past weeks and Rails from a while ago.

On the rails side, I am using postgres to help run the server and keep things from breaking. In the database, I created a two models Catalog and Food, once again for the project, I used food for the catalog because it was the beginning, I had an idea for just foods, but due to my ever-increasing imagination it developed more. Since I am using postgres for this project before migrating the database I had to run rails db:create before rails db:migrate which I learned recently. After that, I went through the entire rails process with making two models: Catalog and Food with food belonging to catalog and catalog having many foods. In there controller section, I built out two controllers but instead of having them render out the erb, I had them render out json which we got from the migration seed. I used the FastJsonapi gem to generate some serializers to use in my controllers. The rails side was good refresher on using rails with the added serializers.

The Javascript side was a bit newer to me since I have not worked a lot with this kind of coding. What i did was made adapter and component files to hold all the Fetch code and the Javascript code that I was going to be using to render out the json from rails. The index.js file starts the page like a key to the ignition in a car. The catalogsAdapter and foodsAdapter have the fetch code which is getting the json from my baseURL, it allows me to get and post to the web page. On the components side, our app.js is receiving functions from catalog.js to allow my objects to show up and be fully rendered out. While the food.js creates html elements to create food cards holding the information, the catalog.js hold everything together allow objects and json to be render and separated neatly and efficiently. The HTML and CSS coding was enjoyable since I was able to revisit the excitement that pulled me into this field in the first place. Overall I enjoyed this project very much, part of this project was inspired by my friends, and game called Pokemon Cafe Mix which I come to enjoy.