CodeCraft Week 8: Hackathon Group Project

Colin Stell
Aug 26, 2017 · 4 min read

This week at CodeCraft we had our first Hackathon Group Project. The objective was to build an application centering around Health. We were placed in groups and given a runway to dream up what we wanted to do with that topic. Our group, consisting of myself and classmates Stephany and Kyle, put our heads together and decided to create a fun web-application where a user would simply input their name and calorie goal for the day and then be taken to a dashboard where we would display a database of foods/drinks and workouts.

We had to create a team name so we decided on SiCK FIT for our team name and application name. We threw together a quick logo and chose a primary color and then got to work on brainstorming on some of the details that our application would have.

We utilized CodeCraft’s co-working space that has whiteboards to sketch out the different aspects of our application. It was easy to dream big at first and we had to reign ourselves in a bit since we had one week to complete the project and present it. We decided to create what would be known in the industry as an MVP (Minimum Viable Product). Our Goal was a application that was functional but had room to grow.

We mapped out everything we would need for our application on the whiteboard, including our HTML files, CSS files, JavaScript Files, etc. We built our backend server using Express and used MongoDB to build the database that we would use for our data.

We built out our HTML pages and added CSS using Bootstrap along with our own custom styles that we liked. From there we could visually see where we wanted to implement data. We decided to build out own database of food and workouts which gave us a chance to continue learning how to use MongoDB and Robo 3T. Once we had User Information, Food/Drink, and Workouts displaying on the page, we had to tie them all together so the user could see their progress as the clicked through foods and workouts.

This is where most of the high’s and lows of the project came in. There were the frustrating times of trying to figure out why our syntax wasn’t working and the highs of finally getting pieces to work together. We learned a lot about scope in this project as well and why certain variables worked within certain scopes and why they didn’t work outside of that.

Once we were able to display our Calorie Count live upon a users clicking through foods (which added to the counter) and workouts (which took away from the counter), We decided to add a progress bar to our page which presented some new challenges.

We used a Bootstrap template for the progress bar and worked with jQuery to change attribute values based on user data which was really cool. Once we got the progress bar working correctly, it was one of the biggest victories we felt as a group for this project.

Our “final” application is what we set out to create, a functioning web-application that tracked a users calories based on foods/drinks consumed and workouts completed. It’s the Minimum Viable Product of a weeks worth of work. If we were going to build this application out further, we definitely have a list of additional features we would have liked to add.

Below is a walkthrough of the final application.

First, a user enters their information on the lading page, upon Submit, their information is sent the the Database and then displayed on the dashboard…

On the dashboard the users information is displayed on the top of the page. Below that is an empty progress bar and Calorie Counter. As a the user adds itms to “Foods Eaten Today” the Calorie Count increases along with the progress bar. If a user adds “Workouts Done Today”, the Calorie Counter Decreases…

The progress bar max value is set to whatever the user enters for their Calorie Goal. Once you hit your goal, a “Congratulations” Message appears…

With 4 weeks left in CodeCraft, I am looking forward to continuing my growth as a developer. We have two more weeks of lectures and career services work and then we’ll spend the last two weeks crafting our individual final projects to showcase on graduation day!

After that, the job hunt begins as we continue to develop the skills we are learning here at CodeCraft and build a career in web-development.

)

Colin Stell

Written by

Front End JavaScript/PHP Developer :: Cigars :: Rock n’ Roll :: Whiskey :: Coffee

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade