Making a Japanese Typing App — Vanilla Javascript and a Rails API
GoType is a single page application (SPA) for language learners to practice their typing in different languages. For this application, I used Javascript to render the front-end and a Ruby on Rails API to manage the backend.
In order to keep the overall workflow of the project as organized as possible, I created two separate repositories for the frontend and backend of the application. During development I ran the backend on localhost:3000 and the frontend on localhost:8080.
Building the Rails API
To create my Rails API, I used the following command to generate the necessary files: rails new gotype-backend --api --database=postgresql
The --api flag ensures that any unnecessary files are generated, specifically views, helpers, and assets, all of which will be handled in the frontend repository. The flag will also make ActionController inherit from API instead of Base. As the default database for Rails is sqlite3, adding the additional --database=postgresqlwill change the database to PostgreSQL right off the bat. I ran into many issues getting my database up and running and installing dependencies such as nokogiri. I suspect these issues were due to an incompatibility with my hardware (M1 chip), so I decided to run my backend development in Docker, using Docker-Compose.
Once the files for the Rails API were generated, I wanted to ensure that Cross-Origin Resource Sharing (CORS) was set up. CORS makes sure that unknown sources can’t access data from the API. Once I uncommented the gem 'rack-cors' line in the Gemfile, I ran bundle install in the terminal.
After the basic setup of the API, it was time to generate the controllers, models, and migration files for users, scores, decks, and cards. As soon as the database and schema were created, I placed JSON files of Japanese study decks in the public folder of my project. I seeded the database by creating the functions below in the seeds.rb file.
Vanilla Javascript Frontend
With myRails API built, I began work on the frontend of my application. I already had a basic design for my frontend in mind, so my index.html and style.css were built fairly quickly.
In order for me to render the data from my API, I create a deck.js and card.js file. Within the two files I declared my classes and static methods which would communicate with my Rails backend and create objects in the frontend.
Once I had ensured that my frontend was properly communicating with my API, I then created and built out the functions in my index.js file. Within the index.js file where all the functions needed to run the basic functionality of my application.
