My Creepy Journey to Becoming a Full-Stack Software Developer

I am a full-stack web developer. It has been quite a journey to get here and I am very proud!

For the past 9 weeks, I have been a student at Flatiron School’s Full-Stack Software Engineering bootcamp, soaking up everything I can about how to build and deploy modern web applications.

After just four weeks of bootcamp, I was able to write my first web application completely on my own. It is a very simple app; I wrote it to reinforce the lessons I was learning about web buttons and forms. Looking back on it now, with five whole more weeks of experience under my belt, it seems clumsy and rough. Even so, I’m fiercely proud of it, because it is my first “full-stack” application.

I know that for people outside the tech industry, the phrase “full-stack” can be confusing. As I have started on my journey, friends and family have asked me questions like:

  • “What is a ‘stack’ anyway?”
  • “So, are there ‘half-stack’ developers?”
  • “Why do you want to be a ‘full-stack’ developer? Is that better than another kind?”

At times I’ve struggled to explain the concept of full-stack development, so I thought it might be easier to describe it by using an example — the example of my first full-stack app!

Randomly Creepy” is based on an illustrated poem called “The Gashlycrumb Tinies” by Edward Gorey. A note of caution: Gorey is known for his very morbid dark humor and the disturbing aesthetic of his artwork — a bit like the Tim Burton of his day. If you don’t like that kind of thing, you might find this app to be overly creepy and gruesome, but fans of the macabre may enjoy. User discretion is advised!

Gorey’s “The Gashlycrumb Tinies” is an alphabet book about 26 unlucky children who all meet tragic fates. To build my app, I created a database of the 26 characters with their names, fates, and images. The user is able to select a character in three ways: (1) by pressing a button to retrieve a random character, (2) by typing a letter to retrieve the character whose name starts with that letter, or (3) by selecting one of the 26 ‘fates’ from a drop-down menu. All three methods lead to a display page for that character.

So, what about this app makes me a “full-stack” developer? While the term ‘full-stack’ may be unfamiliar, the concept has an easy analogy much closer to home — you are carrying it inside your skull!

We know that our brains have two hemispheres: left and right. The ‘left brain’ is said to be more analytical, verbal, and linear. It’s better at things like reading, writing, and computations. The ‘right brain’ is thought of as more creative and intuitive, less organized but more flexible. The two hemispheres are tied together by bundles of nerve fibers, so although the two sides function differently, they work together and complement each other.

I don’t know enough about neurology to comment on how accurate the left brain/ right brain split is when it comes to our minds, but a very similar kind of split is critical to modern web application development. Instead of left and right hemispheres, web applications have a:

  • Front-end — the part of the app that the users see and experience.
  • Back-end— the part of the app that stores and retrieves data, performs calculations, and handles all the functionality of the site that is invisible to the user’s eye.

Let’s take my Gashlycrumb app as an example. When you use that app, everything you see and directly interact with is part of the ‘front-end stack’. A ‘stack’ is a set of technologies that work together to provide functionality. For my Gashlycrumb app, my front-end stack consists of:

  • HTML — how the site is structured; the basic layout everything that displayed on the page, and in what order
  • CSS — how everything on the page should look — the colors, sizes, fonts, etc.
  • Javascript — how the user interacts with the app — what happens when you click on the buttons and drop-down menus.

All of these are working at the same time, stacked together. The front-end is like the right hemisphere of the brain — this is where the creativity and artistry of web applications can really shine through!

The backend of a web application is more like the ‘left brain’ — it primarily deals with the logical, computational, standardized parts of the program. In my Randomly Creepy app, my back-end stack is:

  • Postgres — the database where the data about the Tiny characters are stored
  • Ruby — the programming language that I used to write the code that retrieves the correct character from the database
  • Rails — the server that makes the characters available on the Internet

These technologies are invisible to the user, but critical for making the app function. However, if all I had was a backend, my app would not be very entertaining! When my backend is working with the characters, it is treating them as data, not art. You can see this by going to my back-end ‘endpoint’ — the place on the internet where my back-end provides the character data to my front-end. To the backend, a Tiny looks like this:

JSON object with the properties for one of the Tiny characters

So, when you click on the Randomly button in the Gashlycrumb app, you are clicking an HTML button, styled with CSS, that triggers a Javascript routine. Then Javascript uses the Internet to fetch the data from the backend. The Rails server takes the request, then my Ruby code retrieves the character record data from my Postgres database. Rails serves that data back to Javascript, where the front-end stack takes care of displaying the character to the user. And then the whole cycle can happen again.

I programmed all of it, back to front. I am a full-stack developer!

Software Developer | Data Analyst | Work in Progress