Inspiration

After countless years of living in Brampton and walking its streets, we've discovered a serious trash problem around the city. There is an unprecedented amount of garbage on our trails, sidewalks, and bus stops.

What it does

The web application we've developed gives users a brief overview of how GeoTrash allows the community to improve Brampton's current trash situation. GeoTrash allows its users to post the areas where large amounts of litter have been found and log entries into an Interactive Google Map. Volunteers then travel to the area, clean up the litter, and receive GeoCoins for helping their community. GeoCoins can be used within our application to buy rewards.

How we built it

We first started on a Github Repository using HTML and CSS to develop the structure for our application. Once we attempted to implement an interactive Google Map, we found that it would not be possible with the limited JavaScript functionality that HTML solely provides. We then requested help from a mentor named Stanley to give us recommendations on how to proceed. He recommended React-JS which was very challenging for beginners like us to grasp. After severe perseverance and assistance from another mentor named Andrew, we were to implement the interactive Google Map and add markers for our users to log entries. We then added our prior HTML code into React by modifying it to be compatible inside of a App.js file.

Challenges we ran into

  • Initializing React-JS for the first time and setting up the folder structure
  • Google API Key to allow access to the map's functionality (having to use a credit card)
  • Creating this application with most of our group members having little to no programming knowledge (complete beginners!)
  • Implementing functions inside React which had a completely different structure than normal JS in an HTML file

Accomplishments that we're proud of

  • Being able to get React to install and properly display JS code as an HTML file with no prior knowledge
  • Innovating a web application that solves a major problem in our society

What we learned

  • React-JS's syntax, file structure, and benefits
  • Collaborating with 6 members on Github
  • General JS, HTML, and CSS knowledge with help from W3Schools

What's next for GeoTrash

  • Improved functionality utilizing a web server instead of localhost
Share this project:

Updates