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
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
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
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)
}
}
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)