SwachhNagar— Smart Waste Management System

login and Register Page based on the roles
Admin page-1 to handle the works and all
Admin page-2
Citizen Page-1. To complaint about waste
Citizen Dashboard
System administrator 01
System administrator page 2
System administrator 03 Analysis
Staff work page tracker
Staff work page
Staff Dashboard 01

🗑️ SwachhNagar — Smart Waste Management System

💡 Inspiration Urban waste management is still largely dependent on manual processes. Collection schedules can be inconsistent, citizens often lack a simple way to report waste-related issues, and municipal teams need better tools to coordinate staff, vehicles, routes, and daily operations. We wanted to build a practical digital solution that connects citizens, field staff, and municipal administrators on one platform. That idea became SwachhNagar (स्वच्छ नगर) — meaning “Clean City” in Hindi.

🚀 What We Built SwachhNagar is a full-stack web application designed to digitize municipal waste management. The platform provides separate role-based experiences for: 🔴 Admins — manage staff, vehicles, routes, zones, schedules, complaints, and analytics. 🟡 Field Staff — view assigned schedules and routes and update collection status. 🟢 Citizens — submit waste-related complaints with location details and track their resolution status. Key modules include collection scheduling, route management, vehicle management, citizen complaints, notifications, user management, and analytics dashboards.

🛠️ How We Built It We developed SwachhNagar as a full-stack application using: Frontend: React 18, TypeScript, Vite, React Router DOM, Axios Backend: Node.js, Express.js Authentication: JWT-based authentication with role-based access Database: MongoDB support, with demo data using in-memory seeds The frontend communicates with the Node.js + Express REST API, while different modules handle collections, routes, vehicles, complaints, users, and authentication.

📊 Core Features

📅 Smart Collection Scheduling Admins can create and manage collection schedules by zone, assign staff and vehicles, and track collection status.

🗺️ Route & Vehicle Management Municipal teams can define collection routes, assign vehicles and staff, and monitor vehicle availability and status.

📢 Citizen Complaint System Citizens can report waste-related issues with descriptions and location details. Admins and staff can review complaints through a clear lifecycle: Submitted → Under Review → Resolved

📊 Analytics Dashboard The platform provides visual insights into collection completion, complaint trends, vehicle utilization, and zone-wise performance.

🧠 What We Learned Building SwachhNagar helped us understand how to design a role-based full-stack application around a real-world municipal workflow. We learned how different user roles require different permissions and interfaces, how frontend and backend authentication must remain consistent, and how multiple operational modules can be connected into a single system. We also gained practical experience with React + TypeScript, REST APIs, JWT authentication, state/context management, and dashboard-based data visualization.

⚙️ Challenges We Faced One of our major challenges was maintaining consistency between authentication contexts across the application. Different authentication implementations could cause issues such as missing providers or unavailable user tokens. We solved this by standardizing the authentication context used throughout the application and ensuring components retrieve authentication data consistently from the shared context. We also worked through development issues involving React context, Vite HMR, and frontend-backend integration while building and testing the different modules.

🌱 What's Next SwachhNagar can be extended beyond the current system with: 📍 Real-time GPS vehicle tracking 📱 A mobile/PWA experience for field staff 🗺️ Automated route optimization 📲 SMS/WhatsApp citizen notifications 🏙️ Multi-city and multi-zone support 📄 PDF/Excel report exports 🇮🇳 Hindi language support

These improvements are part of our planned roadmap for making SwachhNagar more scalable and useful for real municipal operations.

❤️ Our Vision SwachhNagar is more than a waste collection dashboard. Our vision is to create a connected system where citizens can report problems, field teams can act efficiently, and administrators can make data-driven decisions. स्वच्छ नगर — स्वच्छ भारत। 🇮🇳 Clean City, Clean India.