A Different Kind Of Bootcamp, Part 3

Leading into our first project at General Assembly, students were equally nervy and excited. Four weeks of intense learning had led to our first real application build, and we were all very eager to yield the fruits of our labor. For this project, we were building an Express.js application in Node. We had specific requirements to include authorization and authentication, we had to utilize at least one API of our choosing, and we had to have a minimal amount of styling, preferably using Twitter Bootstrap. Anything beyond that was up to us, but by Thursday of project week, we were expected to have attained our MVP or Minimum Viable Product.

I had several ideas for applications that I had been storing in my brain for months. As I was plotting out how they would possibly be built out, I found that some of them were going to entail far more work and time than I had available, so I put those back on the drawing board and chose to work on an application that would help a user find out which food venues happened to be open, whereever you may be. Keeping in line with the clever (often times silly) spelling of these kinds of apps, I chose the name ‘whutzOpen?’, which does exactly what it says it does… it finds what is open.

My first day was all research and plotting out my week. We were introduced to Trello, a great tool for planning a project. It allows you to set up several boards, with each board allowing for a series of notes, lists, pictures, etc. It was a valuable tool, and the time I put into planning definitely helped me to stay on track and keep focus on my MVP. Part of my planning included drawing out rough sketches of how my user experience could be, which included drawing crude sketches of what my overall design would be. I spent the better part of the day researching different APIs, particularly MapBox, GoogleMaps, Foursquare, and Yelp. Yelp’s API didn’t have an endpoint which showed if a venue was currently open or not, but Foursquare’s did, which made the choice to use their API an easy one. I was not familiar with MapBox at all, but I liked the idea of using a different company’s API just for the sake of uniqueness. I discovered that MapBox had excellent documentation and that they had a very robust mapping product. I submitted for my API keys and was on my way.

We had spent the better part of the previous week covering Authorization and Authentication. I would have never guessed that there was so much to this process. Including middleware like Passport and BCrypt helps to make the process fluid and really does provide a high degree of security when implemented correctly. Express.js was a challenge to fully understand, which was understandable given that it was my first exposure to a JavaScript framework. After a few iterations through the process of building my routes up, adding middleware, setting up my models, authorization and authentication, I was exhausted and still not 100% confident that I had enough understanding to build something up on my own. Thankfully, through the entire week, our instructors were more than available to help with questions. Most of my questions revolved around routing, specifically making sure to name my files correctly and calling them with the correct/exact path. Looking back, I can see the kinds of errors that I was making through a different lense, which ultimately was one of the main goals of going through that process.

Once I had my authorization, authentication, and routing set up, I needed to add content. Setting up models and using SQL to speak to my database (we used PostgresQL) was one aspect of this process that I had an easier time picking up on, so that part of the project moved along rather smoothly. The API call on the other hand, was not something that I was super clear on. In class, we went over the hows and whys, but I was still not super sure what exactly was going on. Again, with a little help from the instructors, I was able to come back to that piece and make the API call work, grabbing all of the correct information and rendering it to the page. Needless to say, I was thrilled once that was working, since my whole MVP depended on rendering data from that API call. The next piece was to take that information and render the correct location data on my map. Setting up my map design was rather easy, but injecting the data from my API call… I had no clue where to begin. I was able to meet with one my instructors to help me understand the process, and with his help, we got it working. Again, now I can look back at this project and consider the errors that were coming up through a different lense, and understand what I would need to do to prevent them from occuring.

Something that was encouraged by our instructors was the principle of commenting your code. THIS IS SUPER VALUABLE!!!

When someone is reviewing your code, they may not be familiar with the language or framework that you are using, so providing a snippet that will help guide them through your thought process is helpful.

On top of that, if you come back to a project weeks after you’ve stopped working on it, it is not uncommon to feel a bit lost if you don’t have comments to help guide you. I would highly recommend adding even just a sentence or two when you add something to your code.

The last element of my project that I needed to add was styling. We had only spent a little time on Twitter Bootstrap, but I had the fundamentals of CSS pretty much down pat. I wanted to include Bootstrap in my project, but because I had one day left to complete the project, I limited how much time I spent working with it, but was able to get some decent styling using straight CSS. I knew that I would be able to go back and add more Bootstrap later, but I at least wanted it to look presentable. The culture nowadays is to design with a “mobile first” mentality, which makes total sense given that so many people are using their smartphones and tablets as opposed to laptops or desktop computers, particularly for apps.

Friday came quicker than any of us realized, and it was time to present our first projects. One at a time, we had a 10 minute time slot to show off our apps, and I was thoroughly impressed with some of the ideas that my classmates came up with. One person presented an app that took data from Zillow’s API to render the most recent property value for a particular address. Another person built an application that provided a list of venues in a given city that were “dog-friendly”. The highlight was when a classmate presented an app that would build a virtual deck of Magic The Gathering cards, pulling from an obscure API that someone had built, all with the idea of storing a copy of your physical deck in case you wanted to rebuild it. The real kicker for this app was that she included voice recognition, which allowed the user to run commands hands free. We were all blown away by her inventiveness and were encouraged that we too could build something as cool down the road. Did I mention that my classmates were all really great people?

This was the first of three projects that we were expected to complete throughout the course. Following our presentations, we all congregated at a local bar to revel in our accomplishments. We had two weeks off following this project week due to the holiday season, and were happy to have it given that our brains were leaking code.

Next time… we step into the world of Ruby and Rails