The Movie Reviewer

So, for my 4th project, I need to make a Single Page Application(SPA), with a frontend and backend. And since Ive done projects about music, and video games, I figured my next on should be about movies. So I decided to make n application that would let write and submit reviews for them.

So as usual, I started with my db tables. I made a table for movie, genres, movie_genres, and reviews. Here are 3 of them…

Genre Table

Movie and Review Tables

And of course, I set up all of their associations and validations. Here we the ones for the movies

If you’ve read my previous blog, you can probably tell that a lot of these steps are similar to the ones I took for my last project. But one of the major differences between this one and the previous one, is the use of serializers.

Since this is mostly the backend, all it’s really going to be doing is sending and receiving data. So to makes thing more efficient, we serialize data so that it only sends what is necessary to the frontend. For example…

In our Movie Serializer the attributes for created_at and updated_at are removed, since they aren't necessary for the front end to have.

Now let’s move on to probably the hardest part of the project, the frontend, which is mostly made up of javascript.

Something I wanted to do is implement a way to give the movie a rating along with your review, something with stars like this…

I was able to get the stars to appear and also the css, so that the stars could change color when adding a class. But then I got a bit stumped when trying to figure out how I could make the stars fill themselves up. But after a while of digging and researching I found a way that made the most sense to me.

So first, I would add an event listener for clicking to each star, which would then call on Movie.fillStars

Here, I would get all of the stars and make sure they all didn’t have “checked” in their class list, that way they aren’t filled in yellow. After that, the star that was clicked will have “checked” added to its class list. Then the do loop is used to do the seem for each star before it.

In hindsight this is actually kinda simple, but I really struggled with it when starting.

Then after this handling the submission of the form was a whole different thing, but was in my opinion was simpler than this.

This is what the form looks like, with a text area and the inputted star rating

handleSubmit, which handles submitting form

So after the submit button is pressed, the click event listener runs handleSubmit. First it structures the data, written_being the text area, the movie_id being a hidden input in the form, and then rating which uses getRating to count the amount of stars that are filled in.

This project was a very interesting one for me personally, I definitely think it’s been the hardest one, mostly because of the amount of stuff there needed to be done, and also since we starting learning a different language. Also, with my hurt eye making it a pain to open my eye, I found hard to look at my screen for long periods of time. But I think I learned a lot during the entire process, and I am proud with the result.