Ecoscan!

Inspiration

We are both from rural areas in India where waste disposal has always been a visible problem in our communities. A lot of people want to dispose of waste properly, but many simply do not know what can be recycled or where certain items belong. Seeing plastic and other waste end up in streets, empty land, and water sources made us want to create something practical that could actually help people make better decisions in everyday life.

What it does

Ecoscan is an AI-powered web app that helps users identify objects and understand how to dispose of them properly. Users can scan an item using their camera, and the app analyzes it to provide information such as:

-What the object is -What material it is made from

• Whether it is recyclable -Common places it can be recycled -Its environmental impact The goal is to make recycling easier and more accessible for everyone.

How we built it

We built Ecoscan using Next.js, React, TypeScript, and Tailwind CSS. The frontend handles the camera interface and image capture, while the backend processes the image and communicates with the Google Gemini Vision API. When a user captures an image, it is converted into base64 format and sent to our backend API route. From there, the image is analyzed using AI, and the app returns a structured recycling report in real time. We also deployed the project using Vercel and used GitHub for version control and collaboration.

Challenges we ran into

One of the biggest challenges was integrating the AI API and getting reliable responses from image analysis. We spent a lot of time debugging API errors, deployment issues, and formatting the AI responses so they looked professional and useful. Another challenge was handling camera functionality and image processing between the frontend and backend. We also had to solve UI problems like layout overflow and responsiveness while making sure the app stayed simple and easy to use.

Accomplishments that we're proud of

We are proud that we built a fully working AI-powered application from scratch and successfully deployed it as a live website. We are also proud that the project connects to a real-world issue that we personally relate to. One accomplishment we are especially proud of is turning a simple object scanner into a tool that provides meaningful environmental insights instead of just object recognition.

What we learned

Through this project, we learned how full-stack applications are built and deployed. We gained experience working with APIs, frontend and backend communication, AI prompt engineering, GitHub collaboration, and deployment tools like Vercel. We also learned how important it is to keep improving and debugging even when things do not work the first time.

What's next for Ecoscan!

In the future, we want to expand Ecoscan with features like location-based recycling guidance, scan history, more detailed environmental statistics, and support for identifying multiple objects at once. We also hope to make the platform more accessible for communities where recycling education and waste management resources are limited.

Built With

• css
• github
• google-gemini-vision-api
• html
• javascript
• next.js
• react
• typescript
• vercel