RecycleCheck AI

1st - Scan the item
2nd - Get the scan result!
3rd - Advanced result
4th - User profile
5th - Personalized recycling quiz
6th - Achievements
7th - RecycleDex (based off PokeDex)

Inspiration

We've all stood in front of a row of color-coded bins holding a mixed piece of trash, paralyzed by confusion. This hesitation often leads to "wishcycling"-throwing items into the recycling bin hoping they belong, which ultimately contaminates sorting facilities and ruins perfectly good recyclable batches. We wanted to eliminate this guesswork and turn proper waste disposal into a seamless, rewarding, and educational habit rather than a confusing chore.

What it does

RecycleCheck AI is an intelligent, gamified Progressive Web App (PWA) that acts as your personal waste-sorting assistant.

Users simply snap a single photo of mixed trash. Using advanced Vision AI, the app instantly identifies and isolates multiple items within the frame. For every detected item, it displays an independent confidence score, a visual crop of the object, an exact material breakdown, and clear, step-by-step disposal instructions. To keep users engaged and build long-term habits, we built a gamified progression system featuring "Eco-Scores," tracking charts, unlockable achievements, and personalized educational quizzes based on the user's scan history.

How we built it

We engineered RecycleCheck AI as an ultra-fast, mobile-first PWA using a lightweight vanilla stack to ensure maximum accessibility across devices without heavy framework overhead.

Frontend & UI: HTML5, CSS3, and Vanilla JavaScript. Styled rapidly with Tailwind CSS and Phosphor Icons for a clean, modern interface.
Gamification & Data: Integrated Chart.js to map historical user recycling trends and Canvas Confetti to reward milestones.
AI Engine: The core relies on a multimodal Vision LLM API. We heavily optimized the system prompt to output a lean, strictly formatted JSON containing normalized bounding box coordinates ([ymin, xmin, ymax, xmax]), material components, and disposal plans.
Image Processing: We natively processed the AI's coordinates using the HTML5 <canvas> API to cleanly slice and render individual items directly on the client side.

Challenges we ran into

Our biggest technical hurdle was building a fast, cost-effective multi-object isolation engine.

Initially, the LLM returned massively duplicated JSON payloads that skyrocketed our API token costs and created severe UI latency. We had to strictly optimize our prompt to strip all redundant top-level data and nest features efficiently.

Furthermore, translating the AI’s normalized bounding box coordinates into physical canvas image crops was incredibly difficult. Our initial attempts resulted in stretched images and bleeding backgrounds. We overcame this by implementing the strict 9-argument canvas.drawImage() method to accurately scale, slice, and center each cropped item perfectly without distortion.

Accomplishments that we're proud of

We are incredibly proud of the seamless integration between the Vision AI bounding boxes and our frontend HTML5 canvas cropping. Optimizing our AI prompt to eliminate data duplication cut our token usage by nearly 50%, resulting in a lightning-fast user experience. We're also proud to have built a highly engaging, gamified ecosystem (complete with interactive charts and quizzes) entirely in vanilla JavaScript-proving that you don't always need heavy frontend frameworks to build a rich, app-like experience.

What we learned

We deepened our understanding of advanced Prompt Engineering, specifically how to coerce multimodal LLMs into generating highly specific, token-efficient JSON architectures for multiple detected objects. We also learned a tremendous amount about the intricacies of the HTML5 <canvas> API, mastering how to handle aspect ratios and multi-coordinate source-to-destination image drawing.

What's next for RecycleCheck AI

Edge-AI Capabilities: Transitioning to lightweight, on-device vision models to enable basic offline item detection, leaning fully into the PWA architecture to cut server costs and allow zero-connectivity tracking.
Community Leaderboards: Expanding the personal progression mechanics into neighborhood and school leaderboards to foster friendly, community-wide eco-competition.