Creating a Flash Card app Part1

During my time in school, I found myself struggling greatly getting used to the new vocabulary that came with coding. Many of the words were familiar but had completely different meanings. So i decided to build an app that can help solve this problem. Before we get started please check the list of prerequisites below .

Prerequisites

Ruby on Rails(BackEnd)

Javascript(Front End)

Getting Started With The BackEnd

To get started with the backend, cd into the proper directory and create a folder named FastCards. cd into Fast cards and enter the following command to create a react api app with postgresql.

rails new api_fast_card --api --database=postgresql

Beautiful! Now that we have our Rails App, we can structure our backend to create a deck of cards and create cards for those respective decks. In order to do so, we will need to first cd into our new file “api_fast_card” and create our schema.

rails generate scaffold Deck category:text card_id:integer 

The above command will generate a Deck Controller, Deck Model,Resource, and table ready to migrate with the attributes we’ve listed. Next we can do the same for the cards, however we are going to use rails g resources.

rails generate resource Card word:text definition:text deck_id:integer

Now that we have our tables, we can now rake db:create & rake db:migrate . Looking Great! Time to associate our models. I like to use serializers because they tend to make life easy and clean. You can do so by placing the following line into your gemfile.

gem 'active_model_serializers', '~> 0.10.2'

run bundle to install the changes. To create the serializer files, we can use a generator. rails g serializer Deck & rails g serializer Card . Inside of our new serializer files, we need to document the associations.

class DeckSerializer < ActiveModel::Serializer
   attributes :id, :category
   has_many :cards
end
class CardSerializer < ActiveModel::Serializer
   attributes :id, :word, :definition,  :deck_id
   belongs_to :deck
end

Now that our serializers are all set, we need to make the same associations in our models. Navigate to the Model files and redocument the same associations.

class Card < ApplicationRecord
   belongs_to :deck
end
class Deck < ApplicationRecord
   has_many :cards
end

Our associations should be all set. To confirm this, you can either seed data, or use rails c and enter the following lines for usable data.

Deck.create(category:'Software Engineering' )
Card.create(word:'Array', definition:"An array is a data structure, which can store a fixed-size collection of elements of the same data type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.", deck_id:"2" )

Your rails s http://localhost:3000/decks should look something like this

Nice and Neat beautiful data. Now we can move on to building the front end. Stay tuned for the next part where we set up the frontEnd