Greetings fellow beginner Rails/React dev’s! In this short tutorial, I will be retracing and sharing with you my process of deploying a web application that utilizes a React frontend coupled with a Rails backend. I deployed my backend on Heroku, and frontend on Netlify. Before we start, please ensure that your frontend and backend are stored in separate repos. All good? Let’s begin!

Photo by Jake Weirick on Unsplash

Deploying a React Frontend to Netlify

  1. In the script section of your package.json, in "build", add “react-scripts build && echo ‘/* /index.html 200’ > ./build/_redirects”. This script ensures that if you had chose to use something for routing (for example, React Router), the…

Photo by Lukas Blazek on Unsplash

In React, useRef is a hook that…

returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. (Source)

It is normally used to reference underlying DOM elements, an input field for example. However, you can also use it to store reference to any variable. In this way, it may seem no different than useState, but what distinguishes it from useState is that when we update a useRef reference, it does not cause the component to re-render. …

Michael Browning — Unsplash

When two or more events are described as “asynchronous,” it refers to them not existing or happening at the same time. If you have ever worked in the service industry, then you probably know well how to manage your tasks asynchronously. For instance, if you were a waiter in a restaurant, once you entered an order on behalf of a customer, you don’t simply stop all you need to do to wait around for the chef to make the food. …

How does React’s Virtual DOM really work?

Man drawing blueprint
Man drawing blueprint
Photo by Daniel McCullough on Unsplash.

If you’re new to React, the concept of the virtual DOM has likely left your head virtually spinning. You’ve read that React solves the problem of DOM manipulation by using a virtual DOM, which is a lightweight representation of the DOM object. You’ve read that manipulating the DOM is slow, whereas doing so with virtual DOM is fast. And yet you’re still confused as to what all this really means.

In this article, I will simplify the React virtual DOM in a way that hopefully will build a better representation of this concept in your head!

The Problem

The DOM (or the…

Making a sometimes intimidating concept simple

Photo by Markus Spiske on Unsplash.

Hi there. This is the first in a series of articles in which I will be covering computer science concepts in simplified, easy-to-understand terms. From my own personal experience, despite the enormous amount of resources out there, it might be difficult as a beginner to learn new programming concepts. This is because many sources often explain them using overly technical jargon.

So my goal here is to break things down to analogies/everyday examples as best as I can in order to serve any beginners out there who might be struggling to understand these core concepts.

Let’s jump into our first…

Read on for how to build a clean, simple header

View from underneath bridge beams
View from underneath bridge beams
Photo by Ian Mustafa on Unsplash.

Hey, all. Anh here. I am a web developer who recently helped build a responsive header for Femmecubator, an up-and-coming web app that seeks to provide resources and support for women of color in tech. In this article, I will guide you through how to create your own simple desktop header using MaterialUI and React.

By the end of this tutorial, you should accomplish the following result:

Hello all! Today I would like to walk through my iterative solution of how to reverse a linked list. But first, what is a linked list, you ask?

According to Wikipedia:

In computer science, a linked list is a linear collection of data elements whose order is not given by their physical placement in memory. Instead, each element points to the next. It is a data structure consisting of a collection of nodes which together represent a sequence.

A linked list is made up of nodes. Each node composes of two things: 1) some data value and 2) a pointer…

Hello, fellow soon-to-be software developer. If you are preparing for upcoming interviews like me, you’re most likely (or will about to be) grinding away on loads of algorithm problems. In this post, I’d like to share a walkthrough of a problem I recently solved, in hope of better understanding it myself, as well as helping anyone who might be struggling with similar problems.

For this particular bad boy, we’re tasked with writing a function that prints out a two-sided pyramid of n levels that follows a couple of simple rules. I figured out two ways of tackling this (one I…

Get started with a new Rails API project today

Photo by Ross Parmly on Unsplash

So, you are tasked with using a Rails API back end for your new project and you are not sure where to begin.

What gems do I install again?! How do I specify that I want to use PostgreSQL?! What the heck is a serializer? I need a log-in feature and totally forgot how to work bcrypt! [- Commencement of internal screams of frustration -]

Have no fear, beginner Rails dev, here’s what I need you to do: 1. Take a deep breath, and 2. Use this step-by-step guide as a model to get you started.

For the purpose of…


Web Dev & OTR/L || “So many things seem filled with the intent to be lost that their loss is no disaster” — E. Bishop ||

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