Coastar

The Marine Animal Reporting Application

For the 2021 Hawaii Annual Code Challenge (HACC), our team decided to take on the challenge proposed by the Hawaii Marine Animal Response organization. With the mission of providing protection and preservation to Hawaii’s marine species, their issue was that many of Hawaii’s marine animals are threatened or endangered, and often times they want to keep track of each marine animal sighting that is reported. However, this is usually done by phone call from the reporter which can be difficult and time consuming to gather all the information necessary. Unfortunately, these animals are often put under stress by curious tourists that are unaware of the laws created to protect these animals, so it is crucial to be able to gather information quickly and efficiently.

For the 2021 HACC, HMAR proposed the creating of a marine animal reporting application that would allow users to fill out a report form and submit information about the spotted animals location, type of animal, description, how many other people are in the area, and more. Our team was interested in providing support to the mission of HMAR, and created an application that allows users to submit reports, and allows admin users to view the reports and the location specified using Google Maps. Unfortunately we did not qualify for the final presentation day of the HACC, but our team continued to work and improve the application as much as possible within the time frame given. To view the application, please see the links provided above.

Contribution and Approach

Our team wanted to create an application that would allow the users either to report an animal sighting, or report an animal in distress. If an animal sighting is to be reported, then the user will be brought to a form, where the can fill out the necessary fields to provide information on the animal. If an animal in distress is to be reported, this would be a more urgent matter, and instead the user will be brought to a modal that will inform the user to call the statewide hotline. The user will have the ability to click on the hotline number and call them directly from the application.

An image of the report form that is filled out by users if they would like to report an animal sighting.

An image of the report form map, which is used by users to mark the location of the animal sighted.

Users are not required to be logged into their account to fill out the report form. However, if they wish to creae an account they may do so. Once the user logs in, another option in the navbar will appear which will bring the user to a map. Here they will be able to view all the past reported animal locations that they have submited.

An image of the map that is seen by an admin users. They will be able to view all reports in the collection on the map.

Admin users will have the ability to view all reports submitted by all users, and will also be able to view the animal locations on a map. Admin users also have the ability to delete reports on a List Reports page, and they will also have the ability to export data from that table as a .csv file and download for their needs.

An image of the report list that admin users will have access too. Admin users will be able to delete a report from the list, or export the list data as a .csv file.

For this web application, I was tasked with creating Landing Page and the API/collections for the reports that were to be submitted by users. I also created the report form and implemented the use of the Google Maps React API. I also decided to implement the Contact/More Info page, which provides more information on the animals that are reported by the application. I also provided assistance with mapping out the Google Maps marker components on to the Map page and implementing a delete reports functionality. Lastly, I deployed the application using Galaxy.

Skills learned and Knowledge Gained

As stated above, the development of this application was for the 2021 Hawaii Annual Coding Competition (HACC). This was the first HACC I have ever entered and the second hackathon I have ever participated in. Although we did not qualify for the final presentation day, I feel that our team made great improvements in time management and communication from the first hackathon we had entered together. Although we were all stacked with homework assignments from other classes, we still found a way to implement the necessary functionalities for the application, which is a big improvement from out last competition. However, there is always more room for improvement, and I believe we could have definitely produced a better application if our schedules had been lighter and if we had dedicated a bit more time to the project.

I also learned many new implementations from participating in this project. I learned how to set up and use the Google Maps API, as well as its marker and infowindow components, a little bit of how Cordova works, implementing the use of Semantic UI modals and implementing the use of HTML href mobile calls. I also learned how to properly deploy an application using Meteor’s Galaxy docs.

As this semester comes to a close, I am very happy I decided to take this course (ICS 491). I learned a lot about team communication, time management, and increased my knowldege and problem solving skills in web application development. Although our team did not win any coding competitions, I feel like I have gained very valuable experience that I can use as I move forward with my computer science career.