DEV Community

Terry Threatt
Terry Threatt

Posted on • Updated on

Javascript / Rails API Project: Moby - Book Review App

Moby - Book Review App

Project Overview

I just wrapped up a new single-page app to fulfill project requirements for the Javascript module in the Flatiron School Bootcamp Curriculum. I created a book review application that has a Rails API backend to serve up JSON to my Vanilla Javascript frontend.

Backend

After coding in object-orientation Ruby much of the bootcamp, It was pretty fun creating the API in Rails. What felt new was creating my first API-only Rails app. I utilized the active_model_serializers gem, ActiveRecord, and Rails Controllers to serve up data to my frontend.

Here's examples from my Book resource:

create_table "books", force: :cascade do |t|
    t.string "title"
    t.string "author"
    t.string "genre"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
end
Enter fullscreen mode Exit fullscreen mode

I used a serializer to have the most flexibility with serving the data up to the front end.

class BookSerializer < ActiveModel::Serializer
  attributes :id, :title, :author, :genre
  has_many :reviews
end
Enter fullscreen mode Exit fullscreen mode

I created some common restful controller actions to handle requests from the frontend but all my data is being rendered via JSON.

class Api::V1::ReviewsController < ApplicationController
    before_action :set_review, only: [:show, :destroy]

        def index
            reviews = Review.all
            render json: @reviews
        end

        def show
            render json: @review
          end

        def create
            book = Book.find(params[:book_id])
            @review = book.reviews.build(review_params)

            if @review.save
                render json: @review, status: :created
            else
                render json: @review.errors, status: :unprocessable_entity
            end
        end


        def destroy
            @review.destroy
        end


        private

        def set_review
            @review = Review.find(params[:id])
        end

        def review_params
            params.require(:review).permit(:book_id, :body)
        end
    end
Enter fullscreen mode Exit fullscreen mode

Frontend

Working on the frontend of this app really helped me to discover some knowledge gaps and learn more about object-oriented Javascript. There are a few things I needed to re-orient myself on to work with Javascript classes. The Static keyword helps create a class scoped variable(allBooks) that I assigned to an empty array. Next, Javascript has a constructor function for classes that provides a way of grabbing and assigning properties to a new instance of a class. Last in this example you may notice the This keyword. The This key word provides a way of referring to the context in object oriented Javascript. In this case it if referring the the new book instance.

Javascript Book class:

class Book {
    static allBooks = [];

    constructor({id, title, author = "unknown", genre = "uncategorized", reviews = [] }) {
        this.id = id
        this.title = title
        this.author = author
        this.genre = genre
        this.reviews = reviews

        Book.allBooks.push(this)
    }
}
Enter fullscreen mode Exit fullscreen mode

Check out the project

Thanks for taking the time to read about my journey learning more about web development. If you are interested in checking out my Rails/Javascript web app, check out the link below and feel free to leave a comment about your experience learning web development.

Click Here to view the Moby App

Happy Coding,

Terry Threatt

Top comments (0)