A JavaScript/Ruby on Rails Application

6 min readJan 31, 2020

Recently, I started learning JavaScript and Ruby. It began with JavaScript for the basics, then switched over to Ruby and then back to JavaScript. In order demonstrate what I’ve learned in both languages, I’m build a single page application. My application is a combination of JavaScript for the frontend along with HTML and CSS. The backend is Rails as an API and adheres to RESTful conventions in Ruby.

My objective for this tutorial is to go over the basics of my JavaScript and Ruby on Rails application. This will be a walkthrough of my process at a high level overview. You’ll notice I’ve provide several screenshots to help visually how I implemented my processes.

This is a simple wine and chocolate pairing app. A user can select a wine from the drop down, and then a list of chocolates will appear, making it a pair. Vice versa, the same goes for the chocolate pairing.

Starting with the backend first, I create the model, views, and controller(MVC) in Rails. To give a bit of context, I have a many-to-many relationship. I have three models — Wine, Chocolate, and Pairing(join model). Pairing is what joins the Wine and Chocolate model together. Below is how I started the project, called Darkrose.

Below, these command lines are used to create new models. By adding the “g” in the rails “g” resource, it saves a lot of time by creating much of the boilerplate code in advance! It’s very handy. Since using rails as an api, I’ve included Api::V1::model. The double colon (::) is referred to as a namespace in Ruby. The V1 is for the version. This format will come in handy later on for the routes.

Starting from scratch, I set up the appropriate folders and files in order to get started. Here is a quick peak of the folder and file structure. You might be thinking, this looks like way too much going on. Keep in mind you’ll only really refer to a select few of these, mainly the controller, model, routes, schema, and migration files. So no need to be overwhelmed by all this. Again, this was all created with the above code to create the MVC and most of it is not touched.

Below is a sample of my routes in my routes.rb file. Notice the namespace, api, v1 and model name. This is really how the URL is made.

Here are the rails routes below for the Pairing model. Type in rails routes into the terminal and this is what you’ll see.

Here’s another way to look at the RESTful routes.

Once this was complete, I went to check out the controller and model files. These are what the controllers look like as the boilerplate code. I will be making changes to these and will share what that looks like further down below.

The below are the three models, which I added the belongs_to and has_many associations. As mentioned above, this is a many-to-many relationship between wine and chocolate.The Pairing model is the join model between the Wine and Chocolate model.

Below is the schema once I ran the migrations. I added the attributes to each of the models below.

I used a library in Ruby called faker, which generates fake data or seed data. It’s helpful to use to start testing your code out. I had never used the faker gem, but it was quick easy to use. Faker has a lot of categories you can choose from to sort of customize your data, but unfortunately there was not a wine category, so I chose beer as you can see. And same went for chocolate, the closest was a dessert category.

Above I showed the boilerplate code for the three controllers, but now I want to show my controllers again, but with what I implemented.

Now, I’d like to move on to JavaScript the frontend. I used JavaScript and HTML and CSS. Initially, there is some set up like the HTML file, the db.json file, the style.css file, the index.js file, and more.

My index.js file is where I wrote all my functions. The seed.rb is where my seed data went. The index.html is the default website home page. The style.css is where there is styling for the webpage. I incorporated fetches to pull data from Ruby as an API. I used action handler’s and DOM manipulation as well. My fetches were specifically ‘GET’, ‘POST’, ‘PATCH’, and ‘DELETE’ fetch requests to the api.

The index.html looks like this after typing an exclamation mark (!) followed by the tab key. Later on I’ll show my final index.html file.

Here is the seeds.rb file. As you can see it’s an array with many key:value pairs making up my seed data. Not shown, but I did the same for the Chocolates seed data. Another important part of the seed data was to include: Wine.destroy_all, Chocolate.destroy_all, and Pairing.destroy_all.