Full Stack Web Development

I have to be honest, my time with full stack web development has been short to say the least. Beginning just under a year ago — coding along to videos online, now halfway through my software engineering bootcamp journey — I’ve decided to walk through the process with you. Step by step, heavy with documentation and sprinkled with my very, very humble opinion.

Getting Started

The first step in creating a full stack web application, some might think obviously, is choosing which platforms to use. Since it is all I have used, I will be going through the process of building a Ruby on Rails API. For the purposes of this blog, the front end will be HTML, CSS and JavaScript.

Why use a Ruby on Rails API?

Have you ever visited a website, clicked a link and then waited (hopefully patiently) for the next page to reload? Normally with Rails, a developer would be producing HTML within their ‘view’ folders. Connecting these views together through various links and forms. The question stands, why force a user to continuously refresh your webpage when you have the capability to keep everything quick and easy. That is after all, the great thing about the internet right? Even Google shows you their response time every time you do a Google search. If Google is proud of it, it must be important.

Nested JSON data from Ruby on Rails API

Back End

The back end of any full stack application, could be considered the brains of the application. This is where the data will be stored, models created, relationships or associations made along with many other details. Rails defaults to using SQLite database, but you have the ability to choose another if desired.

Lo-Fi WireFrame of a pretty popular website. Can you guess it?
Bash line command for creating Rails API

Front End

Without diving too far into what goes on behind the scenes of your Ruby on Rails API, one by one — database tables will be structured, models created, and associations established.

Facebook with CSS styling!
Facebook without CSS styling!

Wrapping it all together!

Continuing with my all too spot on analogy of a full stack web application and the human body, you can see how important all factors involved are. Much like your muscles wouldn’t work without a skeleton and blood vessels, your web application won’t behave through JS if there is no HTML structure or CSS styling to give it some personality. Most certainly, the three amigos (JS, HTML, CSS) wouldn’t know what to do without the brain (Rails API). Each part is a vital piece to the operation. One cannot go without the others in some way shape or form.

Software Engineer | Full Stack Developer | Soccer Fanatic

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