Litter LookUp

Screenshot of Main Menu
Screenshot of "Why does this matter?" page
Screenshot of "Confirm identification" page
Screenshot of "Baltimore disposal details" page

Inspiration

After visiting a convenience store, a friend purchased a drink that came in a glass bottle. After drinking it, he almost threw it away in the trash bin. Another friend piped up and said, “Don't throw that away, it's recyclable!” Before we knew it, we were stuck in a six-person debate about whether glass was recyclable or not. Though we laugh about it now, we realized that disposing of waste properly is essential but not always intuitive. So, we decided to create Litter LookUp to reduce the confusion around recycling and waste disposal.

What it does:

Functionally, Litter LookUp is a website where users can take a picture of, enter a text description of, or use speech-to-text to describe their litter. The website then uses ElevenLabs and Grok to identify the litter and the material it’s made of. It’s capable of prompting for more information if necessary. Based on the litter’s material, the user is recommended a method of disposal, and we referenced Open Baltimore’s dataset to provide users with the GPS location of the nearest place to correctly dispose of their litter. For hazardous materials, it does display a warning of possible inaccuracy to ensure that the user is well informed. Litter LookUp aims to make a more sustainable and safe environment for everyone.

How we built it:

We built the app using Next.js and TypeScript, which let us handle both the front-end and the back-end in a single project. To identify an item, the user can either type a description, snap a photo, or just speak. All three options feed into Grok, an AI model, which figures out what the item is and how it should be disposed of. For the voice feature, we integrated ElevenLabs for speech-to-text and text-to-speech, but we also built in a fallback to the browser's built-in speech tools, so the feature still works smoothly even if our API key isn't available during a demo. Once an item is identified, we connect to real Baltimore City data (recycling schedules and drop-off center locations) using Open Baltimore to tell users exactly which day their trash gets picked up and where the nearest disposal site is, based on their address. On the front end, we used React and Tailwind to guide users step by step, from identifying their item to confirming it to getting a clear, personalized answer on how to get rid of it.

Challenges we ran into:

We initially struggled to use the API key to connect our camera to the LLM, but after researching the process extensively and learning from other people’s code, we were able to connect it. After debugging, our camera finally worked! We were very excited to read the words “identified: Lithium Battery” on our computer screens.

Accomplishments that we're proud of:

One accomplishment we're proud of is building a multimodal input system that lets people identify their item in whatever way is easiest for them, whether that's typing a description, snapping a photo, or just talking out loud. All three paths lead into the same AI classification and disposal guidance, so no matter how someone chooses to interact with the app, they end up with the same clear, personalized answer. We're also proud of how much we prioritized accessibility, since we built out a full voice input and output pipeline early on instead of treating it as an extra feature. That made the app genuinely usable for people who struggle with typing or reading small text, which felt like an important goal for a tool meant to help everyday people figure out something as practical as trash disposal.

What we learned:

One thing we learned is how much of a difference good user flow makes, even when the underlying technology is solid. We realized early on that just having Grok correctly identify an item wasn't enough if the experience of getting there felt confusing or clunky. So we spent a lot of time thinking through the actual steps someone takes, from describing their item to confirming what it is to finally seeing their disposal instructions, and made sure each step felt simple and obvious. It taught us that good design and thoughtful sequencing can matter just as much as the AI or data powering the app underneath.

What's next for Litter LookUp?

Since Litter LookUp pulls from Open Baltimore’s datasets to provide users with the GPS location of the nearest place to correctly dispose of their litter, Litter LookUp’s next step would be to expand to the entire United States and eventual world. Litter LookUp would greatly benefit from national data on the location of recycling plants and what they process, similar to the data we have on the local Baltimore area. Another improvement in the future for Litter LookUp is the ability to differentiate various recycling standards that countries may have. Especially when it comes to plastics, different countries use a wide range of technologies and standards to organize their recycling efforts, so we'll build Litter LookUp to take that into account.