Full Stack JavaScript — Learning How to Build a Web Application

Several months ago, I sat at my computer and watched in disappointment as Facebook shut down Parse for good. As someone who was just getting used to writing dynamic web applications, this was horrible news. Parse was a backend-as-a-service, and provided a streamlined process for developers to get their apps up and running very quickly. Complete with a robust relational database, Parse was the perfect tool for a student like myself. After Parse was officially shut down, I thought about looking into the open-sourced Parse server, but the ease that Parse provided in the past was gone.

I took this opportunity to learn some new skills: I would learn how to write full stack applications. I had prior experience with HTML and CSS, and Parse gave me some experience with working with a database and a RESTful API, but I didn’t have experience with much else. The first choice I had to make was what stack would I look into.

There are several schools of thought here — some people think you should jump at whatever stack/frameworks are most popular, others will tell you to get started with a framework supported by a language you are more familiar with. Personally, I took the latter approach (not to stay that the stack I ended up working with (MERN) is not popular). I think a good student and aspiring Software Engineer should try to familiarize themselves with as many technology stacks as possible — these skills add versatility to your technical repertoire and make you a much more valuable to whatever project you end up joining. Having some familiarity with JavaScript, I decided to dive into learning full stack development with JavaScript. This would be a starting point for me: after learning the general design paradigms that apply to all full stack application development processes, I planned on jumping to a Python based stack, and after that a Ruby based stack.

Reducing the number of unknown unknowns

Whenever I get started learning something new, one of the first things I do is reduce the number of unknown unknowns. You can’t come to a satisfactory solution with any problem until you identify all the variables that figure into the problem. Getting started with full stack development was an entirely new challenge, and it forced me to dive into unfamiliar territory. Choosing to begin with a JavaScript based stack meant that I at least had some syntactic familiarity with the code I was going to write, but full stack development meant I would need to combine what I already knew in new and challenging ways.

I am personally not a fan of sitting through an entire online course to learn a new framework or topic. I prefer to learn by doing — there is inherent value in struggling with a concept and drawing the connections on your own. It can be a more difficult and drawn out process, but I have personally found it to be very rewarding. Unless there are difficult mathematical concepts or strict theoretical foundations that need to be established, I’ve found that the best course of learning for myself is to force myself to ask the right questions.

Asking the right questions

In order to cut down on what I needed to learn to develop dynamic applications, I needed to ask questions that could help reduce the number of unknown unknowns. Before I could get to building out a full fledged application, I needed to know what I didn’t know. A good place to start is figure out what you do know, and then fill in the gaps of your knowledge.

I was already familiar with HTML, CSS, and JavaScript, and I had experience building out static websites — so I had some background with basic front-end development. What I didn’t know how to do was spin up my own server, my own database instance, and how to connect it all to my HTML page. I researched some popular JavaScript based stacks and came upon the MERN stack — MongoDB, Express, React, and Node.js.

The MERN stack was a perfect starting point for me, mainly because I did have some experience working with Node.js. I first turned my attention to writing server side code with Node.js, and figuring out how Restful API’s work. I found a ton of awesome online resources, and I learned a lot about why Node.js is so popular these days. Freedom to interface with a server in anyway you want is a powerful asset for any framework, and Node.js has an incredible community of engineers that complement it with useful libraries.

Spinning up a basic web server was a fairly trivial task (there are a plethora of tutorials online that can show you how to go about doing that), but what I wanted to figure out was how to utilize a RESTful API to communicate requests between by database and my client. After reading a bunch of articles and following along with some tutorials, I had a theoretical understanding of how this all worked.

My investigations into the RESTful API paradigm naturally brought me to Express routers as well as MongoDB and Mongoose schemas — the back-end was starting to come together. In order to make all of these concepts click fully, I felt like I needed to create something using these technologies. It was exhilarating to finally understand how web applications were served and how they functioned at their core. It also instilled in me a well earned respect for some of the largest and most popular web applications out there today — I can’t use a product without thinking about the way that it was built. Having done some thorough research on using Node.js, Express routers, and MongoDB, the last step was getting started with React.

The developers that maintain React have put together some awesome documentation to help beginners find their bearings. It was difficult to get use to thinking about my interface designs via components, but now it comes quite naturally. In fact, I think it’s pretty cool that modularity and abstraction find there way to various parts of programming, including front-end design. After going through a few more tutorials, I was finally ready to build something of my own.


A simple tutoring forum

As a college student and Computer Science major, I’m a big proponent of attending tutoring hours. They are a great way to work through problems with other students and refine your problem solving abilities. I have found, however, that tutoring sessions can become fairly redundant for tutors: they might have to answer the same questions multiple times throughout a given week. This not only wastes their time, it’s inefficient, and in keeping with the spirit of Computer Scientists, I thought an automated solution could be of use.

Coursify, work in progress build.

I decided to build a tutoring forum with the MERN stack. It will allow students to post questions for tutors to answer — this will allow students to easily have their questions reach tutors without having to physically attend tutoring sessions. It will also allow students who don’t typically attend tutoring sessions to benefit from discussion that takes place online. In the future, I’d like for professors to have the opportunity to guide the conversations on these forum — this will allow them to supplement their lectures to make sure that discussions surrounding assignments are inline with the course goals.

Coursify, work in progress build.

I imagine that students and tutors will both benefit from this forum — access to peer discussions on course content is an invaluable part of any college course experience — my hope is that this forum will help facilitate these important conversations.

Currently, the app is a work in progress. Basic features are up and running, and the UI is mostly figured out. I intend on releasing this forum for several lower-level Computer Science courses this coming Fall semester, and depending on reception, I’d like to be able to add other departments and courses for the Spring.

I also plan on releasing a more technical blog post on the details of the forum, and the engineering decisions that went into its creation.

If you would like to check out the forum, visit http://tutoring-forum.herokuapp.com/

If you want to see the code: https://github.com/AumitLeon/tutoring-forum

Conclusion

Learning about full stack development through the MERN stack has been an enlightening experience —in addition to experiencing other development stacks, I plan on learning more about systems and back end technologies. I am particularly interested in open sourced architectures, and data analysis via machine learning. Whenever I speak to recruiters, I love to ask them why the powers that be made the engineering decisions that they did— I think as a student and aspiring engineer, becoming familiar with these thought processes is an integral part of building great systems.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.