-
-
Original Design of the Website
-
-
Inspiration
The labels on plastic packaging are unhelpful to the average person, as people can't be expected to understand off the top of their head which number actually means "recyclable" or "not recyclable", or whether something is recyclable in their local recycling facility.
What it does
The website acts as a "one-stop recycling" page, informing people who are hoping to learn more about properly recycling their plastics.
How we built it
We first used Figma to make a layout of what kind of website we wanted to build, and Adobe Illustrator to design our recycling symbol vectors. After we came up with a website design and used Coolors to decide on a color palette that we were happy with, we then used a text editor, Sublime, to write the code. A lot of our collaboration was done through Slack and Zoom, as well as Google Docs for all of our content that we were including in the website. We are using a Github repository to host the code.
Challenges we ran into
We had a difficult time figuring out how to communicate with each other without being on Zoom the whole day. Implementation of the map was also difficult, since there were hundreds of recycling facilities in the US. We originally intended to have the user enter in their zip code, but we didn't know enough Javascript to code this feature. We also ran into issues with the navigation bar at the top - we had wanted it to remain on the top as the user scrolled down the site, but the text on the page would overlap with the nav bar. We also had a lot of issues with trying to figure out how to format CSS elements.
Accomplishments that we're proud of
We're proud of the fact that it all came together, and that we have a functional website now. Although it was challenging to figure the navigation bar, we're also really excited that we were able to get it to work. The pop ups were another cool thing to see implemented, we liked how it allowed us to add in a lot more information without bloating the minimalist style of the website. Even though we couldn't get the map to work in the way we envisioned, we were still able to add in a map with the locations of the USA's largest recycling facilities, and when you click on the top right of the map, it goes into Google Maps, where you're able to type in your zip code and see which recycling facilities might be near you. So it works, in a roundabout way.
What we learned
We learned that... Javascript is hard. We ended up learning a lot more about how CSS worked and just how difficult it was to properly format a website. We also learned to collaborate with complete strangers, and have fun along the way. We also started to learn how to use Adobe Illustrator when we decided we needed icons, and ended up drawing our own recycling symbols.
What's next for Santa Cruz Green
We would like to add customizable email templates to send to local representatives and local businesses, stressing the importance of using re-usable plastic over single-use plastic. We would also want to add another section talking about other recyclable materials, such as glass, cardboard, etc.
We would also like to turn the website into a more interactive one, where the user can enter their zip code into the website to automatically bring up the closest recycling facility and list whether they are able to recycle the plastic they had pre-selected.
Log in or sign up for Devpost to join the conversation.