All of the things I've been learning for the past two years were finally brought together to build out my first full stack application for Free Code Camp, a polling app. It's deployed! You can view the source on GitHub.
I took my time on this project because while I was comfortable with React, Express, and MongoDB, I'd never used them together to build a large, modern CRUD application. Piling on to that, I had no experience at all with Redux or the Flux pattern in general, much less how to pass state around in a larger React/Redux application. This was also my first experience visualizing data with D3.js and dealing with user authentication.
I've learned more from this project than anything else I've ever built. This seems like a good time to take a step back to reflect on and share some of the most useful lessons I've learned from this project.
The guided trail of interactive code challenges ended and the time came to venture into wild. Blocking the way I wanted to go was this gaping, vertical ravine of not knowing how to build an application. How do you cross a wide, steep, menacing ravine? The simple answer is to find the tools you need to repel down and then climb up the other side. Learn which techniques and tools to use when, where, and why, learn them well, learn how to use them together, and you can reach your goal. Easy right? Not so much.
At the end of May, I finally completed my Front End Certification for Free Code Camp.
Since then, I've spent some time refactoring a few of my older projects to get them to a place where I don't cringe every time I look at the source code. They were pretty grisly. My Pomodoro app from last year in particular was a hacky mess. It was my first project trying out AngularJS, and while it worked, it broke pretty much every relevant style in John Papa's style guide. Here's the old source if you have a strong stomach. All of the logic was in one controller and $scope was polluted with almost every variable in the project. Not even one service to handle business logic. The controller was in charge or user interactions, business logic, and state. The horror. It must be destroyed. I didn't even know how to use a service versus a controller at the time. It's a small app, and the design-pattern-less layout of the code was well commented, but it would have quickly turned into a field of thorns if it ever needed new features. Good code should be mostly self-documenting anyway. I took this as an opportunity to refactor the app's code structure and logic to separate concerns (UI elements, state, application logic, user interaction handling) and get some practice using Angular 1.5's great new component method, modeled after Angular 2's component pattern. That's a story for another blog post, but it was a humbling learning experience, and Angular 1's paradigm makes so much more sense now on every level.
The new pomodoro source code is here.
It's far from perfect, but application state is maintained in a single shared service (not spread out all over the application), the controllers simply handle user interactions, and the application structure is organized by feature.
Using Redux would greatly impove the state handling, but that's for another day.
I thought I'd christen this shiny new blog with a reflection of how I got to this point. This post will be long (okay, it's a novel), but this will be a good chance for me to reflect on the past few years that have been a roller coaster to say the least.