A Smart Civic Engagement Platform for Reporting and Managing Street Cleanliness Issues
Developed as part of Infosys Springboard Virtual Internship 6.0
Clean Street is a comprehensive web application that empowers citizens to report street cleanliness issues, track their resolution, and engage with their community. The platform bridges the gap between citizens, volunteers, and administrators to create cleaner, more livable urban spaces.
- 🗺️ Interactive Map-Based Reporting - Report issues with precise geolocation using Leaflet maps
- 📸 Photo Upload - Attach visual evidence via Cloudinary integration
- 👥 Role-Based Access Control - Separate dashboards for Users, Volunteers, and Admins
- 📊 Real-Time Analytics - Track complaint statistics and resolution trends
- 💬 Community Engagement - Comment system with upvote/downvote functionality
- 🔔 Status Tracking - Monitor complaint lifecycle from submission to resolution
- 📱 Responsive Design - Seamless experience across all devices
- 📄 PDF Export - Generate reports for complaints
- Framework: React 19.1.1 with Vite
- Styling: TailwindCSS 4.1
- Routing: React Router DOM 7.9
- Maps: Leaflet & React-Leaflet
- Charts: Recharts
- UI/UX: React Icons, React Hot Toast
- PDF Generation: jsPDF
- Runtime: Node.js with Express 5.1
- Database: MongoDB with Mongoose ODM
- Authentication: JWT (JSON Web Tokens)
- Password Security: bcrypt
- File Upload: Multer with Cloudinary
- CORS: Enabled for cross-origin requests
clean-street/
├── frontend/ # React frontend application
│ ├── src/
│ │ ├── Components/ # Reusable UI components
│ │ ├── pages/ # Page components
│ │ ├── context/ # React context providers
│ │ └── utils/ # API utilities
│ └── public/ # Static assets
│
├── backend/ # Express backend API
│ ├── controller/ # Route controllers
│ ├── models/ # MongoDB schemas
│ ├── routes/ # API routes
│ ├── middleware/ # Auth & upload middleware
│ └── .config/ # Configuration files
│
└── README.md
Ensure you have the following installed:
git clone https://github.com/yourusername/clean-street.git
cd clean-streetcd backend
# Install dependencies
npm install
# Create environment file
cp .env.example .envConfigure .env file:
MONGO_URL=mongodb://localhost:27017/CleanStreet
PORT=3002
JWT_USER_SECRET=your_secure_user_secret_key
JWT_ADMIN_SECRET=your_secure_admin_secret_key
NODE_ENV=development
CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_API_SECRET=your_cloudinary_api_secretStart the backend server:
npm startServer will run on http://localhost:3002
cd frontend
# Install dependencies
npm install
# Create environment file
cp .env.example .envConfigure .env file:
VITE_BACKEND_URL=http://localhost:3002Start the development server:
npm run devFrontend will run on http://localhost:5173
- Register and create personal profiles
- Report street cleanliness issues with photos and location
- Track complaint status in real-time
- Upvote/downvote complaints
- Add comments and engage with community
- View all complaints on interactive map
- Access dedicated volunteer dashboard
- View assigned complaints
- Update complaint status
- Communicate with citizens via comments
- Track resolution progress
- Comprehensive admin dashboard with analytics
- Manage all complaints and users
- Assign complaints to volunteers
- View statistics and trends
- Approve or reject complaints
- Monitor system activity logs
- 🗑️ Garbage - Waste accumulation and disposal issues
- 🛣️ Road Damage - Potholes, cracks, and road deterioration
- 💡 Street Light - Non-functional or damaged street lighting
- 💧 Water Leakage - Pipe bursts and water wastage
- 🔴 High - Urgent issues requiring immediate attention
- 🟡 Medium - Important issues with moderate urgency
- 🟢 Low - Minor issues that can be scheduled
POST /api/auth/register- User registrationPOST /api/auth/login- User loginPOST /api/auth/logout- User logout
GET /api/user/profile- Get user profilePUT /api/user/profile- Update user profileGET /api/user/all- Get all users (Admin)
POST /api/complaints- Create new complaintGET /api/complaints- Get all complaintsGET /api/complaints/:id- Get complaint by IDPUT /api/complaints/:id- Update complaintDELETE /api/complaints/:id- Delete complaintPOST /api/complaints/:id/upvote- Upvote complaintPOST /api/complaints/:id/downvote- Downvote complaint
POST /api/comments- Add comment to complaintGET /api/comments/:complaintId- Get comments for complaint
GET /api/volunteer/assigned- Get assigned complaintsPUT /api/volunteer/update/:id- Update complaint status
GET /api/admin/statistics- Get system statisticsPUT /api/admin/assign/:id- Assign complaint to volunteerGET /api/admin/logs- Get admin activity logs
Citizens can pinpoint exact locations of issues
Role-specific dashboards for Users, Volunteers, and Admins
- JWT-based authentication with secure token storage
- Password hashing using bcrypt
- Role-based access control (RBAC)
- CORS configuration for secure cross-origin requests
- Environment variable protection for sensitive data
- Cookie-based session management
The frontend is deployed on Vercel and accessible at:
- Production:
https://clean-street.vercel.app
Configure CORS origins in server.js to include your production URL.
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is developed as part of the Infosys Springboard Virtual Internship 6.0.
Developed with ❤️ by the Clean Street Team
- Infosys Springboard for the internship opportunity
- OpenStreetMap for map data via Leaflet
- Cloudinary for image hosting services
- The open-source community for amazing tools and libraries
For questions or support, please open an issue in the GitHub repository.
Made with ❤️ for cleaner, better cities
⭐ Star this repository if you find it helpful!