Eco Collectors v2.0
Originally developed in 2023 and recently overhauled to v2.0, Eco Collectors is a premium waste management ecosystem. It bridges the gap between citizens and recyclers through a sophisticated 'Modern Eco' interface. The platform features an advanced map-centric request system, intelligent bento-style analytics for administrators, and role-optimized command centers for recyclers and managers. By simplifying the coordination of bottle pickups and bin distribution, it transforms community recycling into a high-efficiency, data-driven operation.
- React.js
- Google Maps API
- Tailwind CSS v4
- React Query
- Node.js
- MySQL
- Bento Grid UI
- JWT Auth
Eco Collectors v2.0 represents the evolution of a 2023 student project into a state-of-the-art recycling management platform. The frontend was completely refactored with a modern design system, replacing generic components with custom-engineered 'Modern Eco' primitives. The application leverages a robust Node.js/Express backend with MySQL for transactional integrity and JWT for secure role-based access control. Key v2.0 innovations include the implementation of bento-style metric grids, enhanced map gesture handling, and a full-width dashboard architecture designed to maximize information density on professional-grade monitors. It stands as a testament to bridging environmental responsibility with high-end web engineering.
- Premium 'Modern Eco' DesignA complete v2.0 visual overhaul utilizing emerald greens, soft slates, and high-fidelity glassmorphism to create a professional SaaS aesthetic.
- Bento-Style Admin AnalyticsIntelligent, asymmetric grid layouts that provide high-level platform insights, performance metrics, and global impact tracking at a glance.
- Intelligent Map Command CenterCustom Google Maps integration with animated search overlays, 'greedy' interaction handling for seamless desktop zooming, and real-time bin status visualization.
- Role-Optimized DashboardsDedicated, full-width workspaces for Admins, Managers, and Recyclers, featuring high-density data tables and specialized action consoles.
- Dynamic Role-Aware NavigationA smart Navbar that adapts its visibility based on user privileges, providing a clean, distraction-free experience for authenticated specialized roles.
- High-Efficiency Data ManagementUtilizes React Query for advanced state synchronization and caching, paired with optimized, compact grid views for large-scale inventory management.
