React App w/ Rails Backend API — Hosted on Heroku

Image for post
Image for post
A teeny, tiny app I built last week…that took me too long to deploy!

I built a small app last week for a technical interview. The build includes a ReactJS frontend that makes API fetch requests to a RapidAPI address, as well a Ruby on Rails backend to store upvotes and downvotes to a PostgreSQL database.

I initially tried to have the backend hosted on Heroku with the front end deployed through GitHub Pages (using a gh-pages branch). I still haven’t figured out why I was never able to get my GitHub deployed app to show anything but the file…so after the day trying, reverted to hosting the frontend on Heroku, as well. These steps should get you up and running pretty quickly. Follow any steps necessary to make sure both of your apps are connected to separate git repositories. You’ll also need to have previously connected your Heroku account to your local environment. …

Wrapping Up Our Last 3 Growth Notations

Image for post
Image for post
3d Wireframing in Adobe Illustrator — With Gradient on Editable Text

Big O Notation is such an immense topic to learn and understand. I read an article that said ‘you don’t have to be a math genius to understand it’. They were lying. Writing these articles, though, has helped me get a better grasp on the subject and just this past week while in an algorithm meetup, I had my first AH-HA moment when someone asked me it was possible to develop the algorithm with an O(1)…before I even knew what was happening…I spouted out “No, because we will always need to iterate over the entirety of the elements, the best we can even hope for is an O(n).” …

Jumping in to the 7 growth notations of asymptotic runtime.

Image for post
Image for post
If you can use this sheet to cheat on something…lmk

This article is part 2 of a shallow dive into Big O Notation. The first article is available here:

In my previous article, we went over what an algorithm and Big O Notation is, and 2 rules when beginning to factor Big O space and time complexities. This post will cover 4 of the 7 major growth notations when factoring what the complexity of an algorithm is, but please know that there are a few minor growth notations I won’t go over in my posts. …

Learning Big O Notation for improving app performance.

Well the time has come…to learn Data Structures & Algorithms. I feel like I should sign off for a year, close the office door after hanging a note on the other side that reads “I’m going in, wish me luck!” I’ve decided to start with Big O Notation, and bring you along with me. This is a BIG topic, so I’m only going to attempt to scratch the surface, and this post might have to become one of many as just an introduction to start. I know nothing about this topic currently, I’m merely just trying to teach myself using numerous sources and videos. …

The default database for Ruby on Rails is SQLite. SQLite, although sufficient for beginner apps, is not the best choice for production of more large scale applications, mostly due to it not allowing more than one user to write to the database at a time (concurrency). Having learned how to instead connect a PostgreSQL database through Flatiron, I thought I’d take the opportunity to learn and install MySQL. This post will walk you through installation of MySQL, MySQL Workbench (for viewing your database), and the first steps of building a Rails app with MySQL as your db.

A gif to keep you reading…

While developing a fake ecommerce App this week, I realized that there was a very limited selection that I could find for a shopping API to fetch data from. By limited, I mean I only found one free possibility, Please feel free to message me directly if you know of any others, I’d love to use them. I thought, then, my only option, if I didn’t want to use the Fake Store API, would be for me to create a Rails Application and implement a PostgreSQL DB and build out models and controllers. After a little research I found a site that was actually using their React Application to host its own necessary data. The application held one file for it’s JSON and one file for its images…and in truth, if you wanted to host your images thru a 3rd party service, you would only need the one Data file, with a key/value set for the image url. I am so excited to learn about this! This process will cut out time for me building out a backend, so I can focus on learning more about Javascript and ReactJS functionality. …

Image for post
Image for post
The time has come for you to toggle

No, not ogling, toggling! Within a React component, we can allow for our users to view, or hide, components on a ‘page’ by pressing a button. This action, toggling, can help keep our container views neat and not over-burdened with all of our components showing all at once.

We will start off working in our main container, or the parent component. This toggling function will need to have access to a local state prop, so it’s important that this container/parent component is a class component. …

When developing applications where users upload images we, as developers, can come up against a few different problems that need to be solved. First, asking a user to take an extra step by having them leave our site and find another site to host their images, then return with the url to input, can be burdensome for them and we can imagine they will quickly lose interest in ever returning. Second, the larger our applications get and the more traffic we welcome (yay, users!), the more space in memory we take up in our servers’ database to store all of these uploads. Storing images in database tables requires servers to process huge amounts of data. …

One month ago, our bootcamp cohort moved from lessons on Ruby/Ruby On Rails to vanilla Javascript. It was made clear to us that making this switch in our education would be no easy feat and initially, this was very true. As a completely green coder three months prior, it had taken me some time to wrap my head around Ruby, an Object Oriented, class based coding Language. Javascript, although based completely on Objects, is a functional-based programming language. In a bootcamp there isn’t much time to explore each aspect of a language at length and I just couldn’t grasp on to the basics of JS. …

Active Record, an ORM, is the interface that allows us to work with the database, whether MySQL, Postgres, etc., using, in our case, Ruby code and logic. In conjunction with Ruby on Rails, the Active Record gem aids in the creation and use of objects whose data is stored in the database. An ORM, Object Relational Management, is the ‘library’ that maps our objects to the database table.

Active Record makes it possible to query (request data) from our database, without using raw sql statements. In order to make our interactions with the database faster and seamless, Active Record supplies us with a number of different finder methods to help us make these queries. …


Osha Groetz

Software Engineer proficient in Ruby, Ruby On Rails, Javascript & React JS.

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