Going to school in Illinois' 5th Congressional district, I've seen firsthand how much climate change and environmental protection are important to the people in my district. I've also seen how much work Congressman Quigley, our representative, does to advocate for environmental protection and sustainability and to educate others about climate change.
Reflecting on these experiences, I still recognized how many people in my middle school didn't know how to recycle property; it seemed like all efforts to organize infographics and presentations were falling short. I wanted to create a more innovative way to teach recycling basics to kids (or really anyone): a method that would be interactive and engaging, rather than just another lecture or reference guide.
Educational Content
-
What is recycling?
- Defined in the broadest sense of the word
- Ends with a game where you match items before and after they were upcycled
-
Why is it important?
- Many of the benefits demonstrated visually
- Ends with a landfill accumulation physics simulation
-
How/where to recycle?
- Explains how to reuse, upcycle, and discard in a recycling bin
- Ends with a game where you identify recycling bins in a photo (much like Where's Waldo?)
-
What can I recycle?
- Walkthrough of different materials and the rules surrounding them
- Ends with a trial: how quickly can you sort 20 items as recycleable/non-recycleable?
WeRecycle is designed around experiential learning principles to foster curiosity and engagement. The goal is that students feel empowered and inspired to recycle through understanding rather than rote memorization of rules and vague threats about the future.
Other Features
-
Login to save your progress with Google OAuth2, email code, or anonymous browser sessions
-
Create unlimited group codes for users to register under, linking their account to you and showing their live progress and outcomes in the educator portal
-
Generate a printable certificate with your name and the date after you complete all four modules
Engineering
Built with Create React App using Firebase as a backend for simplicity and ease of scalable deployment. The most interesting engineering challenges were the interactive games at the end of each module.
React was great for stateful/conditional rendering of slide-based content, but some of the games needed to implement libraries like Matter.js for physics simulations, which did not integrate out of the box with the React ecosystem. This led to me use a combination of vanilla JS DOM manipulation through effects for these features. In the future, for improved maintainability and state consistency, I might use a library like @react-three/rapier or react-three-fiber or react-matter-js instead for more declarative rendering, but in this case, I'm happy with how well the results turned out anyways.
Reflection
I'm very happy with how well-received and impactful WeRecycle has been with how many users have tried it out through the publicly hosted website at werecycle.app. I'm also proud of winning the Congressional App Challenge on my first try with this app; it really showed me that I could make a difference with coding and also, attending the awards ceremony, that there were many other high school builders around America just as passionate and excited about computer science as me.
WeRecycle was also my first intro to edtech; it is how I discovered my love for building tech that teaches through how rewarding it can be. To inspire future edtech builders and Congressional App Challenge participants, I've also open-sourced it on GitHub here.
Screenshots
