2023

Eco Collectors

A waste management and recycling request system that enables users to request bottles pickups and connect with recyclers efficiently. It features a map-based interface where users can submit recycling requests, view available bins, and track request statuses in real time. Recyclers and managers have dedicated dashboards to accept, track, and complete requests, ensuring smooth collection operations. The platform enhances eco-friendly practices by simplifying waste collection, promoting responsible recycling, and improving coordination between users, recyclers, and management teams.

React.jsGoogle Maps APITailWind CSSNode.jsExpress.jsJWTMySQLUbuntu Server

Overview

This project is a full-stack web application utilizing React.js for the frontend and Node.js with Express.js for the backend, with MySQL as the primary database. The frontend leverages React Query for data fetching and caching, React Google Maps API for interactive map features, and Material UI for an enhanced user interface. The backend ensures secure authentication using JWT (JSON Web Token) and manages database interactions through MySQL2 with connection pooling for efficiency. The application is optimized for real-time request handling, with features like filtering, search, and user roles (admin, recycler, and regular user) to ensure smooth accessibility. It is designed to be responsive and mobile-friendly, allowing users to manage and track recycling requests seamlessly across devices.

Preview

Features
Responsiveness: Smooth performance and adaptability across various devices and screen sizes for a consistent user experience.
User Authentication & Roles: Secure login system using JWT authentication, with different user roles including admin, recycler, and regular user, each with specific access permissions.
Interactive Map Integration: Uses Google Maps API to display and manage recycling requests and bin locations, allowing users to search, filter, and navigate to locations.
Real-time Data Fetching & Caching: Utilizes React Query for efficient data fetching, reducing unnecessary API calls and improving performance.
Request Management System: Users can create, update, and cancel recycling requests, while recyclers can accept and complete pickups with status tracking.
Admin Dashboard & Insights: Provides admins with an overview of total requests, active bins, collected bottles, and performance metrics through data visualization.
Email Notifications & Contact Form: Uses NodeMailer to send emails for account-related updates and inquiries, ensuring effective communication.
Filtering & Search Options: Users can filter recycling requests by status, search by user ID, and refine results based on custom parameters.
Accessibility & Multi-Platform Support: Designed to be mobile-friendly with an intuitive Material UI interface for seamless navigation and interaction.

PreviousLive Messenger

NextCyber Sphere