A Touch of Green

Inspiration

Theres been plenty of news on climate change and waste. In one of our households, the recycling bin was recently removed. Thus, we were inspired to encourage, inform, and share resources on how to properly recycle near your area. We want to reduce how much trash ends up in recycling stations.

What it does

The user can locate 5 areas around them to recycle by putting their location in the search bar. Get informed with the types of recyclable products and their conditions that must be met before recycling. In our fun mini-game, you can move the spaceship around to collect cardboard filled with oil in space. Since there is oil in the cardboard, it is no longer recyclable and would be considered garbage. We added a fact about garbage in space.

How we built it

"A Touch of Green" started by brainstorming ways to encourage sustainability and recycling. After coming up with a few general ideas, we went to Figma to layout a basic website structure. We finalized the user interface and key features, and started our GitHub repo to start coding. Using HTML, we created a frame for the website. We got to split up and work on different features and pages, while also starting to implement CSS and JS on the way. We reached out to a mentor to incorporate APIs into our program. We used Google's Geocoding and Places API to let users search their address and find recycling places near them.

Challenges we ran into

We ran into issues when were merging our code through Git, as we are beginners with Git. Additionally, when first planning ideas for the tracks, we had so many ideas that we needed reduce our ideas down to 2-3. Some of the features we wanted to incorporate had to be scrapped or changed into something else. Members of our group also ran into merge conflicts that stunted our progression and made the hacking process a bit more cumbersome and tedious. On the back-end side, setting up our API's proved to be a brain wrestle, especially since JavaScript syntax is new to a lot of us. The places API was especially troublesome. It took 2 mentors for us to be able to overcome a CORs policy issue that was blocking us from successfully being able to receive the JSON object that contained the details of nearby recycling centers.

Accomplishments that we're proud of

Overall we are very proud of our project. It was our first time focusing on front end development and working with the languages (listed above), as well as Git. Setting up an API key and adding the Geocoding and Places API to our Google Cloud Platform added a valuable tool to our developer tool kit. Overcoming syntax issues, and using documentation to properly create our GET requests to the geocoding API was a milestone that ensured our confidence for the rest of our time hacking. The latitude and longitude values we we're able to get allowed us to pull accurate search results via the Places API. Being able to then pull it all together by creating a clean UI for the results using JavaScript document notation was a strong step forward for our application. None of this would've been possible without our use of Figma as a collaborative space for brainstorming our ideas, and visualizing potential avenues before going in blind. Deciding on a color palette, and the general layout for our application saved so much time during hacking. We are definitely walking away from this event as stronger programmers, with a new approach to development that we can take with us to professional environments.

What we learned

We learned how to work effectively with Git, how to implement and use APIs within our code, new coding languages (CSS, HTML, JS, Python). We also learned more about each other as we were acquaintances.

What's next for A Touch of Green

We would like to implement a feature where a user can scan a barcode from an item. This feature would make it quick and easy to learn if the item is recyclable or not.