About Code Food Work

Barbarian Seating Chart

Date: February 2016 Type: Side Project Role/Team: Lead Developer Code Source: Github
Tool(s) Used:
  • MongoDB
  • Express
  • AngularJS
  • Gulp
The Barbarian Group Default Image

I built a basic seating chart for the Barbarian Group using the MEAN stack as an independent project as a student at Fullstack Academy. The majority of the functionality (and refactoring work) present today was done after I left Fullstack.

For our independent projects at Fullstack, the question "what app do you want to build?", was always hard to answer because it seemed like there is already an app for everything. When I did think of one, most of the time I realized someone else had already built it.

BUT - no one had built a seating chart app for the Superdesk.

The Barbarian Group's Superdesk is pretty famous in the agency and architecture world for its concept, design, and frankly, its massiveness.

TBG Desk News #1 TBG Desk News #2

The problem is, the maze of curves, swoops, and ramps of the desk can make it confusing for new Barbarians when it comes to finding conference rooms, departments, or even people.

new people and their seating map

(This picture isn't a setup. It's real)

This project is where I learned the most about the MEAN stack. As a member of group projects at Fullstack I always felt like a contributor, but at times I questioned how I would stand on my own - in this case the project was all on me. Under tight time constraints, students were instructed to meet the goal of finishing the project on time, which means that oftentimes checking best practices were put aside for later in favor of working code now. The following are some examples of the refactoring I did after I graduated to implement some of the best practices that were initially left out.

http request wrong way http request correct way

The code on the left is the code I wrote as a student. I pretty much put everything in the controller. My controllers at that time were big giant blocks of code without much modularity. I didn't use service at all for no other reason than it worked fine putting them in the controller. But as I read more about angular patterns, I learned that any shared requests that will be used through out the app need to be put in service, in this case, $http requests.

Another problem was the frequent use of $rootScope.

avoid rootscope #1

$rootScope is like using '!important' in CSS. It just overwrites everything. This may be okay if it's being used once or twice - but in this project, I used it way too frequently throughout my code as can be seen from the code above.

factory service avoid rootscope #2

The correct way to do this is, again, to put all the shared functionalities in service. That way later when we need to debug the code, we know where to go.

The following code adds SVG dots into HTML and save its x & y coordination and radius into the backend (Mongo), and list all of the dots in HTML via ng-repeat

add dot #1 add dot #2

To protect the Barbarians' privacy, instead of using real names, I used the names of the characters of Mad Men. I am working on deploying this app via google cloud platform. Meanwhile, you can either install it and interact with it following README on my github or if you are not a developer, enjoy the video below.