The HEI Project

Interested in the application?

Below are the links to the Github pages for Shocking Development!

If you want to see the progress of the application from beginning to end, click here!

Want to give the program a shot? Click here!

The HEI Project

ICS 414 served as a continuation of ICS 314, where we continued to work on our Javascript and Web Application building skills in the form of a project for a company. For the past sixteen weeks, my group (named Shocking Development), which consisted of 8 people including myself was tasked with developing a web-based application for HEI, Hawaiian Electric Industries, revolving around recording and comparing greenhouse emissions created from vehicles, be it electric or gasoline-based. The task itself was simple on paper, though it required a lot of backend work, as our group had to account for emissions on not just gasoline cars, but also electric vehicles.

My Contributions

During the first few weeks, our group had to figure out a basic design of the web application. To do this, we used a website called “Figma”; essentially, an online web-design tool that can help with designing a web application. Our main priority was mostly to find what color scheme would work best, what the web pages would look like, and to keep the design styling consistent. I was responsible for designing and eventually creating a fully functioning profile page. Initially, it only contains the basics; username, user picture, email, and a button that would allow the user to edit their profile as well as their credentials (leading up to milestone 2).

While designing the profile was easy, implementing the design via Meteor-React proved to be challenging; while I had a basic mock-up of what the website looked like, implementing it was not exactly easy. I had, at the time, a very crude version of the profile page (via a profile card). It did feature a name and a profile picture, but it did not have the features that our group originally wanted, which warranted additional support on the page.

To ensure that the project functioned as intended, I was tasked (by milestone 4) to create Testcafe tests. While these seemed a little bit simple (the primary code need not be modified), it took a lot of time to create and get working as I had to link the tests to the actual pages, input a set of parameters, and test the Testcafe tests to make sure they ran properly. The skeletons were basic, though they did the job just fine. More than half of the tests passed, though some things needed to be worked on further; these tests creations/edits continued into Milestone 5 and Milestone 6.

Another significant task I was given involved adding default data. This included adding gas prices per state as well as vehicles’ manufactures, model names, make years, and their associated MPG’s. Eventually, with the help of fellow teammates Chris and Shinya, we were able to identify whether a car was gas, hybrid, or electric. This required a lot of research, going through various car databases on USNews and pulling up the relevant data for the cars. Each car also has its own set of trims, so I had to account for that as well.

As per request of the HEI representatives, I also implemented a request page; this page would allow users to make a request on adding a vehicle that is not on the cars data list. The initial problem I had was trying to properly store the data so that the admin could see the request. After several days and a little bit of help from my fellow teammates, the request page finally functioned and did what it was intended to do.

Closing Thoughts

This project was one of the most fun projects that I had worked on. Despite COVID-19 holding back some of the work due to social distancing and working from home, it did not hold back the enjoyment factor. New friends were made, and ultimately a mostly functioning application was created and for an actual company, not just for class. It tested our skills for the real world while also helping us identify our weaknesses and where to improve on.

There were some drawbacks on the project, though that was due more to COVID-19 than it is the actual project; time constraints, social distancing, no in-person interaction, etc. Despite being a 16-week project, time flew by fast; by Milestone 2, we had to push a few items back to Milestone 3 and even Milestone 4 due to how fast the deadlines came. In my case, I was taking (including ICS 414) 6 classes total. As for meetings, everything was done online via Discord with the exception of one Zoom meeting to prepare to meeting with HEI representatives. I prefer in-person meetings as much as the next person since it is easier to talk with group members about possible code problems.

Overall, I was able to learn a lot in this class and had a lot of fun working with my group, while also receiving valuable feedback in the process.