CivicPilot AI

Inspiration

Many people notice problems in their neighbourhood, such as potholes, garbage, broken streetlights, water leaks, and drainage issues. However, reporting these problems can be confusing and time-consuming.

We built CivicPilot AI to make civic reporting simple. A resident can describe a problem, upload a photo, or use their location. The app then helps organize the complaint and guides the user through the next steps.

What CivicPilot AI Does

CivicPilot AI allows users to:

• Create a secure account
• Report local civic problems
• Upload an issue photo
• Describe an issue using text or voice
• Capture the current location
• Analyze the complaint with Gemini
• Identify the issue category and priority
• Route the complaint to the correct department
• Submit and track complaints
• View older reports in My Reports
• Verify reports from other community members
• View local statistics in the Insights dashboard

How We Built It

The frontend was built with React and Vite. Firebase Authentication is used for sign-up, login, logout, and email verification. Cloud Firestore stores user reports and community reports.

Gemini is used to analyze complaint descriptions and images. It creates a complaint title, summary, category, priority, and department recommendation.

The application also includes a free fallback mode. If a Gemini API key is not available, the app uses simple rule-based analysis so users can still test the complete reporting workflow.

The backend is structured with Node.js, Express, Firebase Admin, validation middleware, and service modules. Nodemailer support was added for optional welcome and complaint confirmation emails when SMTP settings are configured.

The application is hosted on Firebase Hosting.

What We Learned

During development, we learned:

• How to connect Firebase Authentication with a React application
• How to store and read user-owned data using Cloud Firestore
• How to build a protected user workflow
• How to use Gemini for structured AI responses
• How to create a free fallback when an external API is unavailable
• How to handle browser location, camera, and voice features
• How to improve responsive layouts for desktop, mobile, and iPad
• How to implement real URL navigation and browser history
• How to handle Firebase email verification links
• How to keep local data visible while Firestore data is syncing
• How to test production builds and deploy them with Firebase Hosting

Challenges We Faced

One challenge was making authentication work for real users instead of only using demo accounts. We configured Firebase Authentication and added clear error messages for invalid credentials, duplicate accounts, expired sessions, and weak passwords.

Another challenge was handling email verification links. A custom verification URL caused an unauthorized-domain error. We fixed this by using Firebase's built-in verification flow.

We also had to fix browser autofill. In some browsers, a saved email address appeared inside the complaint location field. We added proper field names and autocomplete settings to prevent this.

Another challenge was making complaint submission reliable. The app now navigates to My Reports immediately after submission starts, while email confirmation runs separately. Users also receive a visible error message if Firestore is unavailable or their session has expired.

Responsive design was another important challenge. The desktop navigation overlapped on iPad screens, so we added a tablet breakpoint and changed the navigation to a compact menu. The hero card was also centered and resized for smaller screens.

Result

CivicPilot AI is now a complete civic reporting demo. A user can sign up, learn the app through the guided tour, create an AI-assisted complaint, submit it, and track it from the My Reports page.

Built With

• ai
• browser-geolocation-api
• civic-technology
• cloud-firestore
• community-reporting
• css3
• es
• express.js
• firebase-admin-sdk
• firebase-authentication
• firebase-hosting
• gemini-api
• google-ai
• html5
• javascript
• localstorage
• lucide-react
• node.js
• nodemailer
• react
• responsive-web-design
• vite
• web-speech-api