How to Create a Single Page Web App, Using Ruby on Rails on the Backend and Vanilla Javascript on the Front End (Pt 1)

Photo by Chris Ried on Unsplash

In this blog post, I’ll be walking you through how to build the foundations of a web application utilizing JavaScript for the front-end and Ruby on Rails on the back-end. Specifically we’ll be taking a look at my Flatiron School Mod 3 project: ‘POWAH!’. My project partner and I are both car enthusiasts, so naturally we created a car-themed project with the name being an homage to Top Gear UK’s Jermery Clarkson’s catch phrase.

(Note: This is Part 1 of an ongoing blog series, this post covers the foundations of setting up a Rails/JavaScript single page web application)

Deliverables:

• A user can create an account
• A user can see a list of cars with car details (from the database) and add multiple cars to their favorites
• A user can create cars and have it added to the database
• A user can login to their account and see a list of their favorites
• A user can remove cars from their favorites
• A user can sort the cars by their attributes (HP,TQ,Price)

Note: We won’t be getting into the nitty-gritty for every line of code or every function, but rather show you some fundamental aspects to the app that you could apply (in one way or another) to your projects in the future.

It’s crucial to map out the backend’s model relationships before diving into the code, or you’ll have a really bad time trying to get the relationships to work effectively. We have decided to have three models:

• Car: The database that will hold the cars
• UserCar : The join table that keeps track of the user favorited cars
• User: The database that will hold the users

Backend Setup:

Let’s go ahead and create our models, migration tables, and associations:

$ rails g model UserCar user:references car:references
$ rails g model Car picture:string make:string model:string price:integer hp:integer tq:integer des:text link:string
$ rails g model User firstName:string lastName:string email:string password:string

Then we add some seed data to populate the databases, this will be eventually rendered to JSON(more on that in a minute):

Now we’re ready to rails db:migrate and rails db:seed

If you check the schema you’ll see:

We can see that we have our three tables; cars, users, and our join table user_cars with all the properties we need to create a JSON object to be fetched from our front end…but wait, you ask; where do you create this JSON object and where are the views??

I’m glad you asked, diligent blog reader!

We create the JSON object in our controllers, as we’ll go into below. As for the views, we no longer are using Rails for our front end, so, therefore, views remains unused when creating our API. Let’s finally get to the point where we can see our back end mingle with our soon-to-be built front end.

Let’s generate our controllers and skip ahead to break down the code from the finished controllers (for the sake of brevity):

$ rails g controller Cars
$ rails g controller UserCars
$ rails g controller Users

Instead of rendering to views, we’re rendering JSON in our controller actions. Make sure to set up your routes as well:

Let’s go ahead and jump into the front end.

Frontend Setup:

We’ll be going through a couple of the functions used in our application. First of all, we need a DOMContentLoaded event listener:

In this function, we created a carForm which will hide until the createCarBtn is clicked, we created a navbar event listener which will hold the createCarBtn as well as it holding the home, and faveBtn which shows the user favorites. There’s more in here including sort-by event listeners, but for now let’s take a look at the initial fetch function. Clicking on the home button calls on the getCars function, lets take a look at that to see how to fetch the cars from the backend:

In this function, we’re fetching from the rails server that has all our seed data in a JSON file, we’re iterating through the array of car objects, and calling on renderCar which will render each car to the DOM.

Let’s take a look at the renderCars function:

So we’re making the navbar visible, as a welcome splash page (which we didn’t cover yet) hid the navbar. We’re making the car card with the make as a header, adding a class of “card-title” for bootstrap CSS styling, and setting the innerText of that to the actual make that we’re pulling from that car’s JSON object. We do the same for model, price, hp, tq, and description. For the link the only variation is instead of innerText we use innerHTML to make an href link out of the string. We then append everything we just made to the card, and then append the card to the container.

That’s where we’ll leave off this blog post for today, next time we’ll look at the more advanced functions we implemented along with going into how we used Bootstrap CSS framework, and implementing Ruby validations so forms cannot be submitted to the database blank.