Civic Fix

A fully functioning digital platform connecting communities with contractors to fix local infrastructure issues. Report problems, bid on projects, track progress, and ensure quality through ratings.

Comment

Inspiration

CivicFix was inspired by the everyday frustrations of seeing unresolved civic issues—like potholes, broken streetlights, and sanitation problems—in our communities. We wanted to create a platform that empowers citizens to report these issues easily, track their progress, and foster accountability among local authorities and contractors. Our goal was to bridge the communication gap and make civic engagement more transparent and effective.

What it does

CivicFix is a web platform that allows users to:

  • Report civic issues with detailed descriptions, photos, and precise locations using an interactive map.
  • Track the status of their reports in real time, from submission to resolution.
  • View all reported issues on a map and filter by status or category.
  • Rate and provide feedback on the resolution of issues.
  • Enable local officials to validate and prioritize reports, allocate budgets, and assign contractors.
  • Allow contractors to bid on projects and update progress, ensuring transparency and accountability.

How we built it

  • Frontend: Next.js (App Router), React, and TypeScript for a modern, responsive UI.
  • Styling: Tailwind CSS and Framer Motion for sleek, animated interfaces.
  • UI Components: Shadcn UI and Lucide icons for a consistent look and feel.
  • State Management: React Context API for managing global state.
  • API: RESTful endpoints using Next.js API routes.
  • Database: MongoDB for flexible, scalable data storage.
  • ORM: Prisma for type-safe database access and migrations.
  • Authentication: NextAuth.js for secure, role-based user authentication.
  • Mapping: Leaflet and React-Leaflet for interactive geolocation features.
  • Data Visualization: Recharts for analytics and reporting dashboards.
  • File Uploads: Enabled image uploads for richer issue reports.
  • Deployment: Vercel for seamless CI/CD and scalability.

Challenges we ran into

  • Integrating Multiple Technologies: Combining Next.js App Router, Prisma, and MongoDB required careful setup and troubleshooting.
  • Interactive Maps: Implementing user-friendly, mobile-compatible maps with Leaflet and React-Leaflet.
  • Real-Time Updates: Ensuring users receive timely notifications and status changes.
  • Role-Based Access: Supporting different user roles (citizen, contractor, official) with secure access control.
  • Error Handling: Building robust error boundaries and user feedback mechanisms.
  • Cross-Device Compatibility: Making sure the platform works smoothly on both desktop and mobile devices.

Accomplishments that we're proud of

  • Successfully built a full-stack platform that streamlines civic engagement.
  • Designed an intuitive, accessible interface that encourages community participation.
  • Implemented real-time status tracking and notifications.
  • Integrated interactive mapping and data visualization features.
  • Enabled secure, role-based authentication and authorization.
  • Fostered a collaborative team environment and overcame technical hurdles together.

What we learned

  • How to architect and build a scalable, full-stack web application.
  • Best practices for integrating modern frameworks and libraries (Next.js, Prisma, MongoDB, Leaflet).
  • The importance of user experience and accessibility in civic tech.
  • Effective team collaboration, agile development, and iterative problem-solving.
  • How to handle real-world challenges like error handling, security, and cross-browser compatibility.

What's next for Civic Fix

  • Mobile App: Develop a mobile version for even easier reporting on the go.
  • Push Notifications: Implement real-time push notifications for updates and alerts.
  • AI-Powered Insights: Use AI/ML to predict issue urgency and suggest optimal resolutions.
  • Expanded Analytics: Provide more detailed analytics for local governments and communities.
  • Gamification: Introduce rewards and recognition for active community members.
  • Open Data Integration: Collaborate with local authorities to integrate open data and enhance transparency.
  • Localization: Support multiple languages and regions to reach a broader audience.

Built With

Share this project:

Updates