The Bin Breakdown

Inspiration

We realized that we actually didn’t know where many everyday items were supposed to go, and that was really disappointing to us. We care about sustainability, but we found ourselves guessing when it came to recycling, compost, or trash. That made us wonder how many other people feel the same way trying to do the right thing but not being sure if they actually are. This project idea came from those moments of confusion. We wanted to build something that removes the guesswork and explains the impact of wrong disposal in a simple to understand way

What it does

The Bin Breakdown is an interactive educational tool that helps people learn how to properly dispose of everyday items. Users can search for an item and see where it goes and why it goes there and see the environmental and financial consequences if that item is disposed of incorrectly. There is also a game where you can test your knowledge and drag and drop items into one of 4 bins and see if you are correct. The project shows impact at scale: What happens when 100 people make the same mistake, turning small actions into something more tangible and eye opening.

How we built it

The project was built as a web application using HTML, CSS, and JavaScript. The interface focuses on clean design, pastel color coded bins, and simple interactions to make learning intuitive and engaging. We used Chart.js to visualize the environmental and cost impact data in a clear and accessible way. All content was designed with Portland’s waste rules and sustainability values in mind keeping the experience local and relevant.

Challenges we ran into

One of the biggest challenges was balancing education and simplicity. Waste rules are surprisingly complex and it took time to decide how much information to show without overwhelming the user. Design was also a challenge making the site feel modern, clean and fun while still being informative required a lot of iteration and refinement. Ensuring everything looked cohesive and visually appealing took more time than expected, but it was worth it.

Accomplishments that we're proud of

We’re proud that the project turns a frustrating confusing topic into something more approachable and engaging. The drag and drop bins and search feature together to make learning feel interactive rather than just instructional. Most importantly the project encourages users to pause and think about their everyday choices which is something many waste systems fail to do.

What we learned

We learned how powerful visual storytelling can be when explaining environmental issues. Showing impact numerically and visually makes abstract concepts feel real. We also learned that good design is just as important as good code and aesthetics play's a big role on whether people actually engage with educational tools.

What's next for The Bin Breakdown

Next, we want to add more Portland-specific waste rules and provide better tips and feedback to help people make the right disposal choices. We also plan to add a scan feature, so users can scan an item with their phone and instantly see where it should go. In the future, this tool could be used in schools and public waste stations to help people feel more confident and informed. We also hope to partner with local organizations to keep the information accurate.

Built With

• css
• github
• html
• javascript
• jspdf
• vscode