Recyclu

• 

  UI of the product / Functionality displayed of image upload and the analyze feature of the carbon composite wing

• 

  The carbon composite wing used to test the program

Project Information

We selected the theme Clean up your City. The team members are Ansh Lalwani, Uttam Sri Sai Lakumalla, Aaryan Hakim, and Navdeep Singh.

Inspiration

Many residents in San Jose struggle to figure out how to dispose of household items properly such as furniture, electronics, plastic, and more. To make it easier to understand recycling centers and to make sure the city stays safe recycling, hazardous-waste and other drop-offs we developed this application to serve as a local disposal guidance as simple as snapping a photo.

What it does

• Recycling vs. trash
  Should parts be separated?

• E-waste
  What components need special handling?

• Drop-off locations
  Nearest centers or city-run collection events.

• Take-back programs
  Manufacturer or retail return options.

All delivered in plain language, formatted for easy reading.

How we built it

1. Frontend
   Next.js with a drag-and-drop image uploader, React to render AI responses, and CSS modules for styling.

2. Backend
   A Next.js API route that accepts multipart/form-data, converts the uploaded image to Base64, and calls OpenAI’s image-processing endpoint.

3. AI integration
   GPT-4.1 mini model fine-prompted to produce localized disposal steps.

4. Hosting & Deployment
   Vercel for hosting the next.js deployment and secure our environment-managed API keys.

Challenges we ran into

• Endpoint confusion
  We initially used the chat.completions endpoint, which doesn’t support image inputs. Switching to the responses endpoint unlocked our ability to send photos directly to the model.

• UI drag-and-drop polish
  The first version of our uploader had accessibility and feedback issues. We refined the hover/focus styles, added click-to-browse fallback, and improved loading/error indicators.

• Handling multipart uploads
  Next.js defaults to JSON parsing, so we had to disable bodyParser and manually parse formData().

• Image-to-text formatting
  Raw AI output came in Markdown; we needed to render lists, links, and bold text cleanly.

Accomplishments that we're proud of

• End-to-end flow
  From client-side drag-and-drop through backend AI call to polished response cards, everything works in under 3 seconds.

• Local focus
  Custom developer prompt produces San Jose–specific guidance rather than generic recycling tips.

• Extensible architecture
  Modular components and API routes make it easy to add new features (e.g., multi-city support, language options).

• User experience
  Clear loading indicators, error handling, and Markdown rendering create a frictionless interaction.

What we learned

• Next.js’s FormData handling requires disabling the built-in JSON parser.
  
• Prompt engineering is critical: small wording tweaks dramatically improve relevance and clarity.
  
• UI details such as hover states and drag-and-drop feedback are as important as core functionality for perceived polish.

What's next for Recyclu

• Expand local coverage
  Add disposal rules for neighboring cities and counties.

• User accounts & history
  Let users save past queries, bookmark instructions, and set reminders.

• Mobile app
  Provide offline guidance and native camera integration for on-the-go disposal help.

• Community Let the community come together and other companies to list and map out trash cans in the city or other places of recycling. We could have companies list what they would like to take to scrap.

Built With

• css
• next.js
• node.js
• openai
• vercel