This platform enables a community-driven waste recycling ecosystem by connecting individuals who wish to dispose of recyclable materials with authorized collection centers. The system promotes environmental sustainability by incentivizing proper waste segregation and facilitating transparent, traceable transactions between users and recycling entities.

Frontend: Vue 2.7.10
Backend: Spring Boot 3.1.10
Database: MySQL 8.0.31
Caching: Redis
ORM: MyBatis-Plus

Role-Based Permissions

• Buyers: Browse available recyclables, initiate purchase requests, view transaction history, and submit support inquiries.
• Sellers: List surplus recyclable items, confirm buyer requests, track sales history, and communicate with support staff.
• Support Agents: Respond to user inquiries, manage communication logs, and escalate system issues.
• Administrators: Full control over users, roles, organizations, logs, and system configurations.

Core Functional Modules

Waste Classification System

The classification module categorizes recyclable materials into types such as plastics, metals, e-waste, paper, and hazardous waste. Each category includes metadata such as weight thresholds, recycling value, and handling instructions. This structure enables automated sorting recommendations and supports municipal reporting by aggregating regional waste statistics. By clearly distinguishing between recoverable and non-recoverable materials, the system encourages accurate disposal behavior and reduces contamination in recycling streams.

Collection Center Management

This module maintains a registry of certified recycling centers, including their geographic coordinates, operational hours, accepted materials, and capacity metrics. Administrators can assign collection zones, schedule pickups, and monitor facility utilization. Integration with geolocation services allows users to locate the nearest drop-off point. The system also supports IoT device synchronization—smart bins report fill levels and trigger alerts when maintenance or collection is required—optimizing logistics and reducing operational costs.

Transaction Order System

Buyers submit requests for specific waste types, and sellers fulfill them by confirming availability. Once both parties agree, a transaction record is auto-generated, linking the item, quantity, price (if applicable), and pickup/delivery details. The system supports a token-based reward mechanism: users earn credits for each verified disposal, redeemable for discounts on household goods or local services. This gamified incentive model increases participation and transforms waste disposal from a chore into an economically beneficial activity.

Support Ticketing Interface

A dedicated messaging system allows users to raise concerns regarding misclassified items, failed transactions, or unclear guidelines. Support agents respond within a defined SLA, with all interactions logged and tagged for analytics. Feedback patterns are analyzed to identify common pain points—such as ambiguous labeling or inaccessible drop-off locations—enabling continuous UI/UX improvements and policy refinement.

System Administration

Administraotrs manage user roles, audit logs, data exports, and system-wide settings. Role permissions are enforced at both API and UI layers. Activity logs capture critical events such as user registration, order modifications, and credential changes, ensuring compliance and traceability.

Backend Implementation Highlights

Waste Type Management API

@RestController
@RequestMapping("/api/waste-types")
public class WasteTypeController {

    @Autowired
    private WasteTypeService wasteTypeService;

    @GetMapping("/paginate")
    public ResponseEntity<PageResult<WasteType>> findPaginated(
            @RequestParam(required = false) String keyword,
            @ModelAttribute PaginationRequest pagination) {
        
        QueryWrapper<WasteType> wrapper = new QueryWrapper<>();
        if (StringUtils.hasText(keyword)) {
            wrapper.like("name", keyword);
        }

        Page<WasteType> page = wasteTypeService.page(
            PageUtil.toMybatisPage(pagination), 
            wrapper
        );

        return ResponseEntity.ok(PageResult.success(page));
    }

    @PostMapping
    public ResponseEntity<WasteType> saveOrUpdate(@RequestBody WasteType type) {
        wasteTypeService.saveOrUpdate(type);
        return ResponseEntity.ok(type);
    }
}

Collection Center Management API

@RestController
@RequestMapping("/api/collection-centers")
public class CollectionCenterController {

    @Autowired
    private CollectionCenterService centerService;

    @GetMapping("/paginate")
    public ResponseEntity<PageResult<CollectionCenter>> searchCenters(
            @RequestParam(required = false) String name,
            @RequestParam(required = false) String location,
            @ModelAttribute PaginationRequest pagination) {

        QueryWrapper<CollectionCenter> wrapper = new QueryWrapper<>();
        
        if (StringUtils.hasText(name)) {
            wrapper.like("name", name);
        }
        if (StringUtils.hasText(location)) {
            wrapper.like("address", location);
        }

        Page<CollectionCenter> result = centerService.page(
            PageUtil.toMybatisPage(pagination), 
            wrapper
        );

        return ResponseEntity.ok(PageResult.success(result));
    }

    @PostMapping
    public ResponseEntity<CollectionCenter> upsertCenter(@RequestBody CollectionCenter center) {
        centerService.saveOrUpdate(center);
        return ResponseEntity.ok(center);
    }
}

Conclusion

The integration of Vue.js and Spring Boot enables a responsive, scalable, and secure platform that transforms waste management into a participatory, data-driven process. By aligning user incentives with environmental goals and automating administrative workflows, the system provides a replicable model for smart city initiatives focused on circular economy principles.