EcoSnap

My Forest Page
Scanner Page (before upload)
Scanner Page (after upload)
My Data Page
Full Screen 3D Forest

Inspiration

Only 21% of waste gets recycled in the US. Despite an overall recycling rate of around 32%, plastic recycling is even lower, and most waste still ends up in landfills. The root cause isn't indifference. More than half of Americans are unsure what can actually be recycled, recycling feels like extra effort, and most ends up in landfills. The problem isn't a lack of care; it's a lack of clarity and incentive. The consequences of higher carbon emissions, plastic pollution, and wasted resources make it vital to educate on proper recycling practices.

What it does

Make recycling simple and fun with EcoSnap! In EcoSnap, recycling is gamified and users can upload pictures of their trash for instant feedback on how to recycle or reuse their trash, depending on its material. By uploading and recycling trash, users gain points that they can use to cultivate their digital cherry blossom forest. As you recycle more, you can watch your trees grow from sprouts to full blossom, as well as plant new species of trees!

How we built it

We built EcoSnap as a web application using React and Vite. For the 3D sakura forest that users grow with their points, we used Three.js through React Three Fiber, which let us create an interactive UI in the browser. We integrated Gemini API to analyze the image and return recycling advice. User data like points, recycling stats, and forest progress are stored locally through login.

Challenges we ran into

One of the challenges was our git workflow. Team members had different branching strategies, which led to more integration challenges than we initially expected. Merging everything together took more time than we expected as well. On the technical side, building the recycling progress graph gave us trouble when we tried to use custom arc shapes. The problem was that adjacent slice faces ended up being coplanar, which caused several rendering issues.

Accomplishments that we're proud of

We spent a lot of time on the small details in our UI. We're especially proud of the cherry blossom tree we built through Three.js, and that users can select and plant different colored trees in their orchard. We initially were only going to have the user grow one tree, but we expanded our ideas. We're also proud of the custom art we made for the UI because it made EcoSnap more personal for us and invoked a more positive user experience.

What we learned

We learned that scoping is critical at a hackathon. We made the call early on to use localStorage instead of a full database, and that allowed us to allocate our time to focus on other important tasks. It was a good reminder that shipping something that works is better than getting stuck on the perfect architecture. We also gained experience with Three.js for the first time, picking up core concepts like mesh, material, and geometry to build objects in a 3D scene, as well as how to work with a coordinate system to place and orient everything correctly. Overall, we broke down larger problems into smaller more manageable ones and worked together as a team to approach them.

What's next for EcoSnap

The biggest next step is replacing local storage with a real database. Right now everything is stored locally, which works fine for a prototype, but it prevents users from competing or comparing their progress with others. Once we integrate a proper backend and database, we plan to build a points-based leaderboard so friends can see how they stack up and actively compete over who recycles more. We believe adding this social layer would make the experience more engaging and significantly increase user motivation.

Initially, we planned to build it as a mobile app. However, we decided to launch it as a web application instead because of the time constraints. While the website allowed us to prototype and iterate quickly, our long-term goal is still to develop it into a full mobile app. A mobile app would make the experience more accessible and convenient.