ComplainHub

Inspiration We noticed that many communities struggle with a fragmented process for reporting local issues, infrastructural problems, or general civic complaints. Often, reports get lost in bureaucracy, or citizens have no visibility into the status of their complaints. We wanted to build a centralized, transparent, and gamified platform where people can easily report issues, track their resolution, and collaborate with moderators and local staff to improve their surroundings.

What it does ComplainHub is a comprehensive community-driven platform for reporting and resolving civic issues. Key features include:

Location-Based Reporting: Users can submit complaints and pinpoint the exact location on an interactive map. Media & AI Verification: Users can upload images and videos as evidence. The platform includes AI detection features to verify the authenticity of the media and prevent spam. Community Engagement: Users can view a public feed, "agree" with existing complaints to bump their priority, and engage in comment threads. Role-Based Dashboards: The system supports Users, Moderators, and Admins. Moderators can review, approve, or reject posts, while admins have a dedicated dashboard for overall management. Tracking & Resolution: Complaints have clear statuses (pending, approved, rejected, solved). When an issue is resolved, staff can upload "solve media" and text to provide proof of resolution. Multilingual Support & Gamification: The app supports multiple languages for accessibility and features a "Rankings" system to encourage active community participation. How we built it We built ComplainHub using the MERN stack (MongoDB, Express.js, React, Node.js):

Frontend: Built with React and Vite for a fast, modern user interface. We used react-leaflet for the interactive maps, i18next for internationalization, and lucide-react for beautiful icons. Backend: Powered by Node.js and Express. We implemented secure authentication using bcryptjs and JSON Web Tokens (JWT). Database: We used MongoDB with Mongoose for flexible schemas to handle complex data like user roles, complaint statuses, and nested comments. Utilities: multer was integrated for handling image and video uploads, nodemailer for email verification and password resets, and pdfkit for generating reports. Challenges we ran into Handling Media and AI Integration: Managing multimedia uploads reliably and integrating AI detection models to accurately score and label media for authenticity. Complex State Management & Role-Based Access: Ensuring that Users, Moderators, and Admins all had secure, restricted access to their specific dashboards and capabilities without compromising the user experience. Interactive Mapping: Integrating Leaflet into React and ensuring that location data was accurately captured, stored in the database, and rendered correctly on the home feed and individual complaints. Accomplishments that we're proud of Successfully building a fully-featured, full-stack application with a clean, responsive UI. Implementing a robust moderation pipeline where staff can easily review, flag, and update the status of community issues. Creating a seamless mapping experience that makes finding and reporting local issues highly intuitive. Integrating AI media detection to maintain the integrity of the platform. What we learned Advanced techniques in building and structuring a scalable MERN stack application. How to integrate third-party mapping libraries (Leaflet) within a modern React ecosystem. Best practices for handling file uploads, secure authentication, and role-based routing in a production-like environment. What's next for ComplainHub Real-time Capabilities: Integrating WebSockets (like Socket.io) to make the Staff Chat and notifications instant. Official Integrations: Partnering with local municipalities or authorities to automatically route verified complaints to the correct civic departments. Enhanced AI Moderation: Improving the AI models to automatically categorize complaints and flag urgent infrastructure hazards in real-time. Mobile Application: Packaging the experience into native iOS and Android apps for on-the-go reporting.