The HEI Project
05 May 2021
The HEI Project
For the past sixteen weeks, my group (named Shocking Development) and I were 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, 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.