CodeCraft School in Boulder, CO. August 2017. Week 8: Hackathon.

Finished home page, using Facebook API login.

For the past 2 months I have been attending a Full Stack Web Development boot camp at CodeCraft School of Technology in Boulder, CO. We are learning the “MEVN” stack (Mongo DB, Express Server, Vue.js, and Node.js) and for week 8 our assignment was a week-long hackathon using the theme of “health” to get us going.

Our instructor, Raphael Serota, split the ten of us students into assigned teams. My teammates were Joe Fan and Eric Price. Our first two immediate tasks: pick a name and pick a general topic for our “full stack web app.”

The three teams got together in separate areas of our school, and our team got down to business. I had three ideas for names: Hackleberry Finn, Hacky Sax, and Keep Calm & Hack On. We chose Hackleberry Finn for our name and began brainstorming. Firing up our smartphones and searching the app stores we quickly found many Calorie Counter apps out there, which essentially compare your vital info (age, gender, height, weight) to your target (e.g. “I want to lose 1 lb per week” equals “You should consume no more than 1,667 calories per day”). We decided to attempt creating some sort of calorie counter app, also involving a mood component.

We decided to use to track our ideas and our tasks.

Our Trello board.

I have a lot of experience with web design, so I chose to have the task of building the HTML and CSS for the site framework, pages, and layout. Joe was tasked with setting up our Mongo database, using the mongoose npm to make the process a bit easier. Eric was tasked with researching our food API. After some quick googling, we decided to use the API, which has a huge database and offers a free user ID and API key.

Our whiteboard, helpful for setting up our database schemas.
Nutritionix has a huge database!
Using the Postman app to easily see our API call results/objects.
I use Atom as my text editor.

I got to work building the website. First I created my main project folder, then began installing the node modules I knew we needed: express (for our server), mongoose (for our Mongo database), request (for API calls), body-parser (for JSON data). Next, I created my /public folder and the /html, /js, /images, and /css folders inside of that. I set up my express server using static middleware and added the routes I knew we would need: home page, food data entry page, activity data entry page, check progress page, about page, and contact form page (we wound up scrapping the contact form page, as setting up smtp etc would take too much time). Also, I created the all important 404 page!

Our express server running with nodemon returning useful data for debugging.

I enjoy using bootstrap to create page layouts, and set up a very basic site structure with a full width navbar up top, a two column layout below for the main page content, and a simple footer using <small> text. Bootstrap 4 was just released, but I chose to use Bootstrap 3 for this project. I also chose some Google Fonts and found a beautiful color scheme to use via Adobe Kuler. For stock photos, I used

Google Fonts, a web designer’s friend.
Adobe Color, another great resource for web design.
Pixabay is great for high res stock photos.

Joe created three models for our database for User ID info, Food Items, and Activity Items. We used a separate db.js file for our mongoose code and utilized Robo 3T to interact with our Mongo database.

Robo 3T makes database management much easier.

Eric found a great YouTube video tutorial on how to make a call to the Nutritionix API and fleshed out some front-side js for that using jQuery.

We were on our way, but had a long way to go. Ultimately we wanted to: 1. Have a login system that would allow unique visitors to enter vitals about themselves; 2. Allow those users to search for foods they ate or drank from the API call, the time and mood when consumed, and then enter those items into a form which would pull the calorie information from the API call and record it into the database; 3. Allow users to also enter activities that burned calories, the time and mood for each, and record that data in the database; 4. Finally, visit the Check Progress page to see a graphical representation of this data.

For the login, Joe dove in to the Facebook login SDK. This proved to be quite complicated, especially for newer developers such as ourselves. In the end, Joe persevered and was able to allow Facebook users to log into our site. This was great since it allowed us to display their name from Facebook on our homepage and using the Facebook user ID # we could uniquely identify them in our Mongo database.

Facebook login in upper right and our home page awaiting a new user.
A return visitor, with vital info displayed and a different home page layout with links displayed.

We took the front-end API call code from Eric’s YouTube research and search bar results and I refactored it over to our server.js code in the back-end, to keep our API User ID and Key info hidden from the client side. Our teacher’s assistants, Eddie Vetter-Drake and John O’Neil, patiently (!) helped us at several points along the way, especially with my next task: returning the nutritionix API call data into a column on the HTML page.

Food Data page before a search…
Success! Food Data page after a search and results back from the API call.

We used Vue.js to return data from the database into areas on our pages, appending unordered lists with a growing list of <li> items.

The list of foods, with calorie calculations based on servings!

For the Activity Data page, I took some calorie burn numbers that Eric researched, used a 150 lb person as the base case, and calculated five activities by calories burned per minute:

burnRates : {
 ‘Running/Jogging’ : 10,
 ‘Weightlifting’ : 4,
 ‘Walking’ : 7,
 ‘Cycling/Mountain Biking’ : 13,
 ‘Sleeping/Napping’ : 1

We didn’t have time (we had about 4 1/2 days) to tie into some form of “human data API” and pull info about activities from that, so we had to use this more arbitrary method. Just like the Food Data page, we were now able to add a growing <ol> list to our page displaying calculated calories burned due to time spent doing the activity.

Exercise Data page awaiting user input.
Entering an activity from the dropdown menu choices…
Growing list of activities with calories burned calculated correctly.

Cool, we had some nice functionality on the site, a great look/feel, and a database filling up with some useful information tied to unique users. But how to display this information?

I did a little research, and found the Chart.js site.

Sleek and gorgeous animations for many types of charts!

After finding some sample code to use, I decided to use a “Line Chart” to display three pieces of data: 1. Calories Ingested; 2. Calories Burned; 3. Mood. These were to be displayed in two charts: 1. By the day the user input the food and activities; 2. Averaged by the week from a date range chosen by the user. The idea was to pull this information from our Mongo DB and push the results into an array used by the chart.js file in a “dataset” object. Due to time constraints, I had to add some “dummy data” over a sample 24 hour period and averaged over a sample week period.

Line chart showing a 24 hour period.
Line chart showing a weekly average. Mood is altered by calories ingested and calories burned.

To give our site a final polish, Eric filled out our About page with some bio information about each of us.

Ladies and gentlemen, your hackathon web developers, aka Hackleberry Finn.
We are a diverse group and worked together very well.

We struggled all through this hackathon using Git and Github to manage our code files. We ran into the dreaded “merge conflicts” a few times, but quickly learned how to fix them with commits, pushes, and pulls.

Our git repo online in all its glory.

Whew. After fixing code literally at the last minute, all three teams reconvened in our classroom for presentations of our apps. I was very excited to see what my fellow “cohort” teams had worked so hard on all week as well. I was extremely impressed with everyone’s projects, their own perspectives on how to solve the “calorie counter app” problem, and how much we were all able to accomplish in such a short amount of time with essentially zero hackathon, full stack web development experience. After a short pow wow, our judges panel (which also included our dedicated Career Services liaison, Meredith Rafter) chose team Hackleberry Finn as the winners of the hackathon!