EcoScan Vision

Scan. Sort. Simplify.

Comment

The Spark: A Local Problem with a Global Impact

The inspiration for EcoScan came from a simple, everyday moment of confusion that I think we've all experienced. Standing in front of the color-coded waste bins here in Bhopal, holding a piece of trash, I felt a familiar uncertainty: Blue, green, or black? Is this pizza box too greasy to be recycled? What about this plastic wrapper?

This small moment of doubt, multiplied by millions of people every day, has a massive environmental impact. In a city working hard towards the goals of the Swachh Bharat Mission, this confusion is a critical barrier. I realized the problem wasn't a lack of willingness, but a lack of immediate, clear information.

I saw the potential for AI, specifically the new multimodal capabilities of the Gemini API, to be the bridge. What if you could just show the problem to your phone and get an instant, correct answer? That was the moment EcoScan was born: an AI-powered "second opinion" in your pocket to make responsible waste disposal effortless.

The Journey: From Idea to Insight

This hackathon was an incredible learning experience that went far beyond just calling an API.

Learning Full-Stack Architecture: I knew I couldn't build a real product with a single script. This project forced me to think like an architect, cleanly separating the Python/Flask backend (the brain) from the React/TypeScript frontend (the face). This modular approach was a huge step up from my previous projects.

The Art of Prompt Engineering: My biggest takeaway was that working with a Large Language Model is less like programming and more like being a manager. My initial prompts were too simple, and the AI would only identify one item in a photo. I learned to be forceful and explicit, providing step-by-step instructions and, most importantly, "few-shot" examples directly in the prompt. This taught me that the quality of the AI's output is a direct reflection of the quality of my instructions.

Beyond AI: Integrating Real-World Data: I realized a "wow" feature would be to find real disposal centers. This pushed me to learn how to integrate a second, entirely different service: the Google Places API. It transformed the app from a simple classifier into a truly actionable tool.

User Experience is Everything: A simple text address for a location is good, but a clickable "Get Directions" link that opens Google Maps is great. This small change taught me to always think from the user's perspective: What is the most direct path from their question to their solution?

The Architecture: Stacking the Blocks

I built EcoScan using a modern, scalable tech stack, focusing on rapid development and clean separation of concerns.

Backend (The Brain 🧠):

Framework: Python with Flask was the clear choice for its speed in setting up a robust REST API.

Core Intelligence: The Gemini 2.5 Flash model served as the heart of the application, handling all image analysis, chat responses, and data formatting.

Real-World Data: The Google Places API was integrated to provide live, real-time location data for e-waste centers, replacing any hardcoded or dummy information.

Structure: The backend is organized into a clean, modular structure using Flask Blueprints, with separate files for configuration (config.py), AI logic (ai_services.py), and web routes (api_routes.py).

Frontend (The Face 🖥️):

Framework: React with TypeScript was used to build a fast, type-safe, and component-based user interface.

Styling: Tailwind CSS allowed for rapid, utility-first styling, making it possible to create a polished design within the hackathon's timeframe.

Dynamic Rendering: The frontend is responsible for all the user-facing logic. It intelligently parses the structured JSON from the backend to dynamically render beautiful analysis cards and build the Google Maps Directions links on the fly.

The Hurdles: Lessons in Resilience

No project is without its challenges, and EcoScan had its fair share.

Challenge 1: The "Single-Minded" AI: My biggest initial hurdle was that the AI would only identify the most prominent object in a photo. After several failed attempts at rephrasing the prompt, I learned the power of providing a concrete example in the prompt itself. Showing the AI the exact multi-item output I wanted was the breakthrough that made the feature work.

Challenge 2: The Mystery of the Garbled Hindi: When I implemented the Hindi language support, all the text from the API came back as a garbled mess (like हिंदी). I initially thought it was a backend problem, but after confirming the API was sending correct UTF-8, I realized it was a frontend rendering issue. The fix was twofold: ensuring was in my index.html and, crucially, adding the 'Noto Sans Devanagari' web font to my CSS. It was a powerful lesson in how the full stack works together.

Challenge 3: Avoiding Feature Creep: My ambition was high, and I had plans to add user accounts, points systems, and leaderboards. However, I realized that for a hackathon, a polished, perfectly working core product is far more impressive than a buggy app with too many features. Making the tough decision to postpone those ideas and focus on perfecting the analysis, chat, and location features was a critical lesson in project management and prioritization.

Share this project:

Updates