Skip to content

Repository files navigation

E-Waste Management System with QR Code Tracking

A comprehensive e-waste management system that uses QR codes to track the lifecycle of electronic waste items from collection to disposal.

πŸš€ Features

QR Code Generation

  • Dynamic Form Creation: Fill out detailed forms for e-waste items
  • Unique Serial Numbers: Automatically generated unique identifiers (EW-XXXXX-XXXXX format)
  • Barcode Generation: Creates both QR codes and barcodes for items
  • Backend Integration: Saves all item data to MongoDB database
  • Printable Labels: Download high-quality PNG labels for printing

QR Code Scanning & Status Updates

  • Real-time Scanning: Scan QR codes using device camera
  • Item Details Display: View complete item information after scanning
  • Status Management: Update item status through the scanning interface
  • Backend Sync: All changes are immediately saved to the database
  • Status Workflow: waiting for pickup β†’ in transit β†’ processing β†’ done

Backend API

  • RESTful Endpoints: Complete CRUD operations for e-waste items
  • Serial Number Lookup: Find items by unique serial numbers
  • Status Updates: Update item status by serial number
  • MongoDB Integration: Persistent data storage with Mongoose ODM

πŸ—οΈ Architecture

Frontend (React + Vite)+ Backend (Node+ Express)

ewaste-project/
β”œβ”€β”€ frontend/
β”‚   β”œβ”€β”€ public/
β”‚   └── src/
β”‚       β”œβ”€β”€ components/
β”‚       β”‚   β”œβ”€β”€ campaigns/
β”‚       β”‚   β”‚   β”œβ”€β”€ CampaignCard.jsx
β”‚       β”‚   β”‚   └── ParticipationModal.jsx
β”‚       β”‚   β”œβ”€β”€ common/
β”‚       β”‚   β”‚   β”œβ”€β”€ Header.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ Footer.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ Sidebar.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ AuthCallback.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ ClerkProvider.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ ProtectedRoute.jsx
β”‚       β”‚   β”‚   └── RedirectHandler.jsx
β”‚       β”‚   β”œβ”€β”€ dashboard/
β”‚       β”‚   β”‚   β”œβ”€β”€ RecentActivity.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ StatsCard.jsx
β”‚       β”‚   β”‚   └── WasteChart.jsx
β”‚       β”‚   β”œβ”€β”€ inventory/
β”‚       β”‚   β”‚   β”œβ”€β”€ AddItemModal.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ CategoryFilter.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ ItemCard.jsx
β”‚       β”‚   β”‚   └── QRScanModal.jsx
β”‚       β”œβ”€β”€ hooks/
β”‚       β”‚   └── useAuth.js
β”‚       β”œβ”€β”€ pages/
β”‚       β”‚   β”œβ”€β”€ Analytics.jsx
β”‚       β”‚   β”œβ”€β”€ Campaigns.jsx
β”‚       β”‚   β”œβ”€β”€ CompliNCe.jsx
β”‚       β”‚   β”œβ”€β”€ ContactUs.jsx
β”‚       β”‚   β”œβ”€β”€ Dashboard.jsx
β”‚       β”‚   β”œβ”€β”€ Home.jsx
β”‚       β”‚   β”œβ”€β”€ Inventory.jsx
β”‚       β”‚   β”œβ”€β”€ QRGenerator.jsx
β”‚       β”‚   β”œβ”€β”€ RoleSelection.jsx
β”‚       β”‚   β”œβ”€β”€ SignIn.jsx
β”‚       β”‚   └── SignUp.jsx
β”‚       β”œβ”€β”€ services/
β”‚       β”‚   └── api.js
β”‚       β”œβ”€β”€ utils/
β”‚       β”‚   └── api.js
β”‚       β”œβ”€β”€ App.jsx
β”‚       β”œβ”€β”€ App.css
β”‚       └── index.css
β”‚       └── main.jsx
β”‚     └── .env
β”‚
β”œβ”€β”€ backend/
β”‚   β”œβ”€β”€ config/
β”‚   β”‚   └── db.js
β”‚   β”œβ”€β”€ controllers/
β”‚   β”‚   β”œβ”€β”€ donorController.js
β”‚   β”‚   └── ewasteController.js
β”‚   β”œβ”€β”€ middleware/
β”‚   β”‚   └── auth.js
β”‚   β”œβ”€β”€ models/
β”‚   β”‚   β”œβ”€β”€ Company.js
β”‚   β”‚   β”œβ”€β”€ Donor.js
β”‚   β”‚   β”œβ”€β”€ EWaste.js
β”‚   β”‚   └── Vendor.js
β”‚   β”œβ”€β”€ routes/
β”‚   β”‚   β”œβ”€β”€ companyRoutes.js
β”‚   β”‚   β”œβ”€β”€ donorRoutes.js
β”‚   β”‚   β”œβ”€β”€ ewasteRoute.js
β”‚   β”‚   β”œβ”€β”€ items.js
β”‚   β”‚   β”œβ”€β”€ userRoutes.js
β”‚   β”‚   └── vendorRoutes.js
β”‚   └── server.js
β”‚   └── .env

πŸ”§ Installation & Setup

Prerequisites

  • Node.js (v16 or higher)
  • MongoDB (local or cloud instance)
  • npm or yarn

Backend Setup

cd backend
npm install

Create a .env file in the backend directory:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/ewaste_management

Start the backend server:

npm run dev

Frontend Setup

cd frontend
npm install
npm run dev

πŸ“± Usage

1. Generate QR Code

  1. Navigate to /qr-generator
  2. Fill out the e-waste item form with:
    • Item type, brand, model
    • Weight and condition
    • Pickup address
    • Additional notes
  3. Click "Generate Label"
  4. Download the generated label as PNG

2. Scan QR Code

  1. Open the QR scanner (available in multiple pages)
  2. Point camera at the QR code
  3. View item details
  4. Update status if needed

3. Status Workflow

Items progress through these statuses:

  • waiting for pickup: Initial state when item is reported
  • in transit: Item has been collected and is being transported
  • processing: Item is being processed/recycled
  • done: Item has been completely processed

πŸ”Œ API Endpoints

E-Waste Management

POST   /api/ewastes                    # Create new e-waste item
GET    /api/ewastes                    # Get all e-waste items
GET    /api/ewastes/:id                # Get item by ID
GET    /api/ewastes/serial/:serial     # Get item by serial number
PUT    /api/ewastes/:id/status         # Update status by ID
PUT    /api/ewastes/serial/:serial/status  # Update status by serial

Request/Response Examples

Create E-Waste Item

POST /api/ewastes
{
  "itemType": "Laptop",
  "brand": "Dell",
  "model": "Latitude 5520",
  "weight": "2.5 kg",
  "condition": "Working",
  "pickupAddress": "123 Tech Street, Bangalore",
  "date": "2024-01-15"
}

Update Status

PUT /api/ewastes/serial/EW-ABC123-XYZ/status
{
  "status": "in transit"
}

πŸ—„οΈ Database Schema

E-Waste Item

{
  serial: String,           // Unique serial number (required)
  donorId: ObjectId,        // Reference to donor (required)
  itemType: String,         // Type of electronic item (required)
  brand: String,            // Brand name
  model: String,            // Model number
  age: String,              // Age of the item
  weight: String,           // Weight with unit
  condition: String,        // Current condition
  pickupAddress: String,    // Pickup location (required)
  date: Date,               // Collection date (required)
  pictureUrl: String,       // Image URL
  shortNote: String,        // Additional notes
  status: String,           // Current status (enum)
  createdAt: Date,          // Creation timestamp
  updatedAt: Date           // Last update timestamp
}

πŸ§ͺ Testing

Demo Page

Visit /demo to see a complete demonstration of the system:

  • Sample e-waste items with different statuses
  • Interactive QR scanning
  • Workflow explanation

Test QR Codes

The system includes test QR codes for development:

  • ewaste-item-001
  • ewaste-item-002
  • ewaste-item-003

Manual Testing

Use the manual serial entry feature in the QR scanner to test with custom serial numbers.

πŸ”’ Security Considerations

  • Input Validation: All form inputs are validated
  • Error Handling: Comprehensive error handling for API calls
  • CORS Configuration: Proper CORS setup for frontend-backend communication
  • Database Validation: MongoDB schema validation

🚧 Future Enhancements

  • User Authentication: Add login/signup functionality
  • Role-based Access: Different permissions for donors, vendors, admins
  • Image Upload: Support for item photos
  • Analytics Dashboard: Track e-waste processing metrics
  • Mobile App: Native mobile application
  • Real-time Notifications: Status change alerts
  • Bulk Operations: Import/export multiple items

🀝 Contributing

  1. Fork the repository
  2. Create a feature branch
  3. Make your changes
  4. Add tests if applicable
  5. Submit a pull request

πŸ“„ License

This project is licensed under the MIT License.

πŸ†˜ Support

For support or questions, please open an issue in the repository or contact the development team.


Note: This system is designed for educational and demonstration purposes. For production use, additional security measures, error handling, and testing should be implemented.

About

No description, website, or topics provided.

Resources

Stars

1 star

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages