Building a Web App in JavaScript

I wanted to build a very simple program that I could use to help me or other students throughout their courses by creating a custom flash card study app. This is a shared app so all courses and cards will be available to everyone.

My goal was to get this published in a production environment so I created the backend and frontend in their own respective repository. One named “front” and one named “back”. Unfortunately, I ran into numerous issues trying to setup my database with PostgreSQL which caused some time constraints so this will not being making it to production yet.

The front will contain my single HTML page, assets for CSS and images, JavaScript components, and the project readme. I’ll also being using Bootstrap for the CSS framework. The back will be the Rails API with models for Cards and Courses and corresponding controllers and database tables for each.

FRONT

The index page is a standard HTML page which contains a <div class=”main”> element that will be the parent for the elements within courses and cards that need to be displayed.

The primary index.js file will be loaded after the HTML page has rendered and this is where I’m going to set a constant for a new ApiService object and a new Modal object then make a call to get the existing courses.

Getting courses will send a fetch request to the Rails API, create a new course for each existing course and then make a call to create the HTML elements and render those courses to the DOM.

One of the most important aspects of rendering each course is to set the data-id equal to that of the course id and then adding a “click” event listener to each of the items. When the click is detected, I want to render the course show page. The course show page will not only display the course but also the cards that are associated with the course. So this is where I want to make a call for another fetch requests but for the cards related to the course.

For creating a new course or a new flash card, I used a bootstrap modal that will send a POST fetch request to the API, add it to the database and render the new object to the DOM. I also put in a link if a user would like to view all cards regardless of the course (in case it’s a final that includes all courses)

Back

Using the built-in rails generator for resources, I created the table for a Course which includes a name and description. The table for Cards includes a phrase and a definition.

As it’s built, courses contains all routes with the intention of coming back and finishing the remaining at a later time. Index, new, and create are the only routes currently in use. The routes for cards includes the index for the view all page of flash cards but new, create, and destroy are all nested under courses. Courses. The nested routes was important so that creating new flash cards would have access to the course’s id. The controller actions are all set to render/return json objects.

The card index action will check if the params include a course id. If so, it will only return the cards that have that course id but otherwise it will return all cards. This allows the request to only receive the cards needed.

The models are simply Course and Card that both inherit from ApplicationRecord. A Course has many Cards and a Card belongs to a Course.