A team of undergraduate Computer Science majors formed in Fall 2021

Back to HACCamino


Table of Contents


ECOCamino (also Eco-Camino, EcoCamino) is a web application designed to help registered users organize events such as cleanups and workshops, report trash or needed assistance, as well as promoting other non-profit organizations around the area. Our goal is to become a one way stop for people who want to contribute, but not know where to start. ECOCamino is designed to help communities team together to educate and address real threats to our ecosystems and increase environmental awareness among the public! Our application’s goal is to build a community, host and attend events, connect with people through forums and accumulate points for participating. Registered users will be notified through real time notifications and can view their notifications when they sign into the application.

Deployed Site: ECOCamino

Disclaimer: On the link above, you will only be seeing the “built in 5 days” version of the web application. The team is still deciding on how we should proceed from here. We will be posting updates as soon as we can. Thank you very much.


Below are some screenshots of the web application using a sample user account and data.

Landing Page

Upon entering the site, the user is greeted by the landing page. The landing page provides visitors a background of the app and the ability to sign in or create an account by clicking on the dropdown in the right corner.

Landing Page

Sign Up

New users can fill out the necessary fields to create an account. The zipcode connects them to their community.

Sign Up

Sign In

Returning users can log in via the Sign In button on the landing page.

Sign In


Upon logging in, the user is taken to their profile. On the profile page, regsitered users are able to customize their information. They can view their upcoming events, past events attended and it is where their incentive points are displayed.



As registered users participate, they will redeem points for the following participation. To redeem points for events, members who attend the event will be given a unique code to verify through the Verify Code button.



Registered users can organize events and workshops around their community by adding an event and marking it on the google map. Here the user can see the events occuring around the community. They can narrow the list of Cleanups, Workshops and Events by choosing one of the five tabs:


Add Event

Registered users can add an event by selecting Add Event Page. The user will provide the title, type of your event, date including start and end time, name, contact email, description, the address of the event, and marker on the google map. The events must be approved by admin before they are live. Once they are approved, the events can be joined by other users. Users can also leave events.

Add Event

Report Trash

Users can report trash or assistance. Similar to adding events, users will need a title, description, location, a marker and upload an image of the trash or needed assistance. Other users can adopt the report and clean up where its needed assistance.

Report Trash

Events and Reports On Map

The location of the events and reports are marked on the map with a card displaying the information and its location.

Event On Map


Users can communicate with other members by creating and replying through forums.


Create Forum Post

To create a forum, users can click on the tab that will redirect them to fill out the Title, Content and Tags. The user can view all forums within the community and respond to them. They can also see their posts in its own tab.

Create Forum Post


Notifcations appears in real time when a member interacts with another members report, event or forum. The notifications from being online and offline are viewable in the top right when the user clicks on the bell.


Admin Event Approval and Denial

Admin can approve or deny events and add feedback.

Event Approval


Users can view and visit helpful links, and non profit organizations around their area. Users are able to learn more about these organizations and try to find what best fits their interests.

Disclaimer: We are not affiliated with any of the organizations seen on our page. We simply added them for demo purposes. Although we are open to working with them and other environmental organizations in the future.



Download and install the latest version of Meteor. Bring up a shell, cd into the app directory and run the following commands locally:

meteor npm install

Packages and Plug-ins

Install the latest version of Bootstrap.

meteor npm install react-bootstrap bootstrap 

Amazon Web Services


npm install aws-sdk

Google Maps

React Google Maps/API

Google Maps Places API

npm install --save use-places-autocomplete
npm install --save-dev @types/googlemaps

The template of our map Map Template


React Icons

meteor npm install --save react-icons

React Smart Data Table

meteor npm install --save react-smart-data-table

React Date Picker npm install react-datepicker --save

React Select

yarn add react-select

Generate Fake Data

Combobox npm install @reach/combobox

Running The System

Once everything is installed, to run the app use the following command in the app directory:

meteor npm run start

If all goes well then the template application will appear at http://localhost:3000

UI Template

UI Bootstrap Template Bootswatch: Minty

Background of EcoCamino

EcoCamino was developed for the 2021 Meteor Hackathon. It was developed in five days by the team members listed below. The team consists of University of Hawai’i students majoring in Computer Science. The team is composed of students from Dr. Johnson’s ICS 491 class. It won first prize out of all the teams who competed. Please find our personal contact in the links of Our Team for any further questions.

The Team: HACCamino

Back to HACCamino