Welcome back!!! So far we have built out our rails back end for our application. In this post we will create our user interface. If you haven’t done so already please check out part one to this app found at. https://vincentservio.medium.com/creating-a-flash-card-app-part1-8f2ad6954331post.

Many of the variables that we will be using will stem from that post.

Begin by Cd’ing into FastCard folder(or whatever you named your Flash Card parent folder). Enter

mkdir frontend_flashcards

than cd into that folder and enter the following commands

touch index.js index.html style.css

This will create our basic file structure to start our app. As we progress…

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 .


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

Have you seen something similar to the image above and wanted know how to accomplish this?Or have you been looking for a cool way to style your forms. Either way you’ve found yourself in the right place. Recently i was asked by my employer to create something similar to the image above. While it seemed easy, i couldn’t seem to find the right words to google, nor did i know how to properly describe it. I scrapped a webpage that i found with that format, however after googling my findings, i was pointed to a paid UI library by the…

During a recent coding interview,I was given two arguments, one was a string and the other was an integer. I was asked to return the character/characters that appeared the number of times that corresponds with the integer. While that seemed easy to do, I was stumped with how to approach this because i couldn't remember how to place key/value pairs into an array. After acknowledging and telling my interviewer that i did not seem to remember how to accomplish this, she gave me permission to do a quick google. …

If you have ever built a react app , then chances are you have used a package manager to do so. In my early stages of working with react, I was introduced to Npm(Node Package Manager). I didn’t fully understand what it was or why i used it. I simply understood that I used it to start my project but i didn't understand the scale or impact that the package manager had on the actual app.

The input element is my personal favorite and arguably one of the most important elements that exist. The input element can help the user interface look more clean and an overall better user experience. Excessive typing can be annoying, but the proper use of input can make forms or user interaction seamless and fun.


The Input element accepts the users input with control that allows the users to edit the field. For example <input value=” checkbox”/> allows the user to edit the field however they can only check a box if the value is truthy or falsy. …

Looping is an essential part of coding. Looping allows us to execute code as many times as needed, each time with a different value. This minimizes the lines of code and can be used as a powerful tool when optimizing code.Today we are going to discuss a few different ways to Loop in Javascript and hopefully understand the difference and power in each.

Search algorithm’s are an awesome way to return data from a large collection. Search algorithms are used to check for an element in any data structure that is it stored. Although some processes are more time consuming than others, they are under the same roof of searching algorithms. Today we are only going to focus on two types of search algorithm’s.

In the Previous versions of React, stateful logic was tied to a class based component. While it may get the job done, it would lead to a tree of nested components, which may not be the cleanest or most efficient way to write code.

useState is one of the most used react hooks. useState is used to handle changes made to state.

import {useState} from 'react';function App(){//Right Hand side 
//useState takes one optional argument which sets default state.(0)
//Left Hand side
//this function returns an array of two values to later use in your component. …

Javascript comes equipped with a tons of great ways to iterate. Today we are going to focus on .map and .forEach . Sometimes the difference between the two aren't quite clear, and in some instances they can be interchangeable. However knowing the difference can save you time and help you code more efficiently.

.forEach() = forEach executes a function for each element in an array.

.map() = Map executes a function for each element in an array, however it returns the results in a newly created array.

How may this be helpful to you?

Well that all depends on if…


Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store