E-Waste Recycling Assistant

An intelligent web application that helps users properly identify, assess, and dispose of electronic waste through AI-powered image analysis and location-based recycling guidance.

Features

📸 Smart Identification

• Photo Analysis: Take pictures of e-waste items for instant AI-powered identification
• Manual Entry: Browse comprehensive categories when you know what you have
• Multi-Item Scanning: Scan multiple items and plan disposal trips efficiently

⚠️ Safety Assessment

• Automatic hazard level classification (Low, Moderate, High)
• Specific safety warnings for dangerous materials
• Component identification (lithium batteries, mercury, lead, etc.)

♻️ Disposal Guidance

• Step-by-step preparation instructions
• Recommended disposal methods
• Local recycling program information
• Environmental impact assessment

📍 Location Services

• Find nearby e-waste recycling centers
• Filter by government and private facilities
• Get directions and contact information
• View accepted item types per location

🗺️ Trip Planner

• Organize multiple items for efficient recycling trips
• Group items by compatible recycling locations
• Prioritize by hazard level
• Combined disposal guidance

Technology Stack

• Frontend: React 19 with TypeScript
• Build Tool: Vite 7
• Styling: Tailwind CSS 4
• Linting: ESLint 9 with TypeScript support
• Package Manager: npm

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository

git clone https://github.com/yourusername/e-waste.git
cd e-waste

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Open your browser to http://localhost:5173

Build for Production

npm run build

The optimized production build will be in the dist/ directory.

Preview Production Build

npm run preview

Project Structure

e-waste/
├── src/
│   ├── App.tsx           # Main application component
│   ├── App.css           # Application styles
│   ├── main.tsx          # Application entry point
│   ├── index.css         # Global styles
│   └── assets/           # Static assets
├── public/               # Public static files
├── index.html            # HTML entry point
├── package.json          # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
├── vite.config.ts        # Vite configuration
└── tailwind.config.js    # Tailwind CSS configuration

E-Waste Categories Supported

The app provides guidance for:

• 🔋 Batteries: Lithium-ion, alkaline, rechargeable, button cells, lead-acid
• 📱 Mobile Devices: Smartphones, tablets, smartwatches, wearables
• 💻 Computers: Laptops, desktops, monitors, peripherals
• 🔌 Cables & Accessories: Chargers, cables, power banks, external drives
• 📺 Audio/Video: TVs, speakers, headphones, gaming consoles
• 🏠 Home Appliances: Kitchen appliances, personal care, vacuums
• 🖨️ Office Equipment: Printers, scanners, fax machines
• 💡 Lighting: LED bulbs, fluorescent tubes, smart bulbs
• 🎮 Gaming: Consoles, controllers, accessories
• 📷 Photography: Cameras, lenses, drones
• 🔧 Tools: Power tools, electric drills, measuring devices
• 🚗 Automotive: Car electronics, GPS devices, dash cams

Development

Available Scripts

• npm run dev - Start development server with hot reload
• npm run build - Build for production
• npm run lint - Run ESLint
• npm run preview - Preview production build locally

Code Quality

The project uses:

• TypeScript for type safety
• ESLint for code quality
• Strict mode React for better development warnings
• Tailwind CSS for consistent styling

Linting

Run the linter:

npm run lint

API Integration

The app analyzes e-waste items using AI vision models. The analysis provides:

• Item identification and classification
• Hazard assessment
• Disposal instructions
• Environmental impact data
• Recycling program recommendations

Browser Support

• Modern browsers with ES6+ support
• Camera API support for photo capture
• Geolocation API for location services

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'feat: add some amazing feature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Acknowledgments

• Built with React, TypeScript, and Vite
• Styled with Tailwind CSS
• Icons and UI inspired by modern design principles
• E-waste disposal guidelines based on EPA and local regulations

Contact

For questions or suggestions, please open an issue on GitHub.

---

Made with ♻️ for a cleaner planet