EcoScan is a web application designed to promote environmental awareness and simplify the recycling process. Scan a product's barcode, learn about its environmental impact and recycling category, and find the nearest appropriate recycling bins on an interactive map.
🏆 This project was developed for the Software Mansion Hackathon 2025 and proudly secured 1st place. 🏆
In today's world, proper waste disposal and recycling are crucial. EcoScan aims to make this process easier and more informative for everyone. By simply scanning a product's barcode using your device's camera, you can:
- Identify the Product: Get details like name and image.
- Understand its Recyclability: See the assigned recycling category (e.g., plastic, glass, paper), GreenScore, and carbon footprint.
- Contribute Data: If a category is missing, you can help improve the database by suggesting one. The app also tracks how many times a product has been verified.
- Find Nearby Bins: Use the "Navigate" feature to open a map showing your current location and the locations of nearby recycling bins suitable for the scanned product's category.
EcoScan empowers users to make more informed decisions about waste disposal, contributing to a cleaner environment.
| Home Screen | Barcode Scanner |
|---|---|
 |
 |
| Product Details | Adding Category | Recycling Bin Map |
|---|---|---|
 |
 |
 |
✨ Barcode Scanning: Utilizes the device camera to scan EAN barcodes via react-qr-barcode-scanner.
📊 Product Information: Displays detailed product information fetched from the backend API, including:
- Name & Image
- Recycling Category (e.g., Plastic, Glass, Paper, Metal, Bio)
- Product Type
- Barcode Number
- GreenScore (if available)
- Carbon Footprint (if available)
- Verification Count (community contribution indicator)
➕ Category Suggestion: Allows users to select and assign a recycling category if one is not already present for the product.
🗺️ Interactive Map: Integrates with Leaflet (react-leaflet) to display:
- User's current location (obtained via Browser Geolocation API).
- Nearby recycling bins relevant to the product's category, fetched dynamically based on user location.
- Custom map markers color-coded by bin type.
↩️ Navigation: Uses react-router for seamless page transitions between the home screen, product page, and map view.
- pFornagiel 👑 – idea author, acted as team lead overseeing project development and product design, implemented barcode scanning, and fixed critical dependency issues.
- Blajszu – built the entire frontend and UI, integrated it with the backend alongside jakubkalinski0 .
- jakubkalinski0 – developed the API, backend, and database; handled backend–frontend integration alongside Blajszu.
- mcjwsn – implemented the interactive map displaying bin locations and user geolocation.
- radbene – scraped product data to populate the database.
- Frontend Framework: React
- Language: TypeScript
- UI Library: Shadcn/ui and Neobrutalism Components
- Styling: Tailwind CSS, Global CSS (
App.css) - Routing: React Router (
react-router-dom) - Mapping: Leaflet, React Leaflet
- Barcode Scanning:
react-qr-barcode-scanner - API Communication: Fetch API
- Build Tool: Vite
This frontend application communicates with a separate backend service responsible for:
- Managing Product Data: Stores and retrieves product information (name, recycling type, barcode, etc.) using a Python FastAPI server connected to a SQLite database (
waste.db). It can fetch existing products by barcode or create new entries if a scanned product is not found. - Finding Recycling Bins: Uses the Overpass API to fetch locations of nearby recycling bins based on the user's geographic coordinates and the required recycling category (e.g., plastic, glass). The search is currently focused on the Kraków area.
- Language/Framework: Python, FastAPI
- Database: SQLite
- External APIs: Overpass API (for map data)
- Open the application in your browser.
- Click the "Skanuj teraz!" button on the home page.
- Grant camera permissions if prompted.
- Align the product's barcode within the scanner view.
- Once scanned, you will be redirected to the Product Page displaying its details.
- If the category is missing, click "+ Dodaj kategorię", select the appropriate category from the dialog, and confirm.
- Click the "Nawiguj" button.
- Grant location permissions if prompted.
- The map will load, showing your location and nearby recycling bins suitable for the product.
This project is licensed under the MIT License - see the LICENSE file for details (or state it directly if no file exists).