JavaScript & Ruby on Rails Project — Flatiron School

The fourth project for Flatiron school had us use JavaScript for the frontend and a Ruby on Rails API for the backend. This was the most difficult project thus far on my journey in the self-paced program here at Flatiron. My project is called “Movie Quotes” and it helps keep record of all my favorite movies and the character’s famous quotes or memorable one liners.

Requirements

I had to use a Ruby backend that has a has-many relationship for the models. For example, a movie has many characters and a character belongs to a movie. The user can post a list of movies and each movie can have many characters and quotes that belong to them. I also needed to use Object Oriented JavaScript for the movie and character classes to encapsulate related data into the models. The app must make at least 3 AJAX calls using fetch and the correct HTTP verb and cover at least 2 principles of CRUD (Create, Read, Update, Destroy). My app was able to create, read, update and destroy objects. Below is an image of the movie class.

The biggest challenge was being able to make associations between the models and then being able to post the movie characters and append their image to the card divs. It took a bit of searching but I stumbled upon this site here to learn how to post the pictures using URL. I did not have to do too much for the backend but it was important to use serializers. Serializers help with creating and storing data and being able to parse the data which may be hard to extract in the form of nested data. The Active Model Serializer gem can be used and installed to help with rendering complicated data from the database.

gem active_model_serializers - add to gemfile and bundle install

The next thing I had to learn was to take the json content and render it using JavaScript. I used ES6 class syntax and template literals to create the objects. Using template literals is quite easy and fun to use once you get the hang of how it works. With a combination of using template literals and creating classes and ID objects, I was able to create character cards with their name, quote, and a like button as well as a delete button.

In conclusion, I have learned so much from the beginning to the end of this project. I definitely have upped my CSS and HTML skills. I found myself doing a lot of research and googling for many different topics just to add a desired feature for my project. I also was stuck on what kind of topic to cover because there are so many different apps available already. With enough brainstorming and research I was able to create this movie quotes app and it is the most interactive and fun one I have made so far for Flatiron school. There is still a lot of room for added features and later on I want to improve the user experience for this app. I am proud of my JavaScript project all the tough work paid off and it was a rewarding experience. I’m excited to continue on to the next phase for React. Once again, thanks for the read. Feel free to watch the video demo below to see how the project works.

If you would like, please check out my Github for more info.