CivicRelay: Smart Community 311 Dispatch

An interactive community hazard tracker that uses AI triage and spatial deduplication to turn neighbor reports into verified, official 311 city dispatch tickets.

Comment

Inspiration

If you’ve ever reported a dangerous pothole, a broken pedestrian signal, or an overflowing trash bin to a city 311 system, you know the frustration: your ticket disappears into a bureaucratic black box, and you never know if anyone actually read it.

At the same time, we noticed local neighborhood groups and Nextdoor threads constantly flooded with people complaining about the exact same street issues. City workers get slammed with dozens of duplicate reports for one single pothole, wasting hours of call-center time, while neglected blocks get ignored simply because fewer people complained.

We built CivicRelay to fix both sides: give residents a live, transparent map to report and upvote neighborhood hazards, and give city dispatchers clean, deduplicated, prioritized work orders ready for field crews.

What it does

CivicRelay is a community action hub and municipal triage tool centered on Austin, Texas:

  1. Interactive Community Map: Powered by Leaflet.js and OpenStreetMap, residents can explore active neighborhood hazards categorized into Accessibility, Safety, Cleanliness, and Infrastructure.
  2. Assistive AI Hazard Vision Triage: When submitting a report, residents can upload a photo or choose from sample urban hazards. Our triage engine analyzes visual features, calculates a confidence score (e.g. 96%), assigns a hazard priority level (Critical/High/Moderate), and auto-fills categories and descriptions.
  3. Haversine Spatial Duplicate Interception: If someone tries to report a problem within 200 meters of an active ticket, CivicRelay catches it in real time using the Haversine geodesic formula. Instead of filing duplicate clutter, it prompts the resident to "+1 Endorse" the existing issue, instantly bumping its priority on the city's radar.
  4. Inclusive Accessibility (Text-to-Speech): Integrated Web Speech API audio narration allows visually impaired residents to listen to hazard descriptions and locations aloud.
  5. 311 Municipal Command Center: A dedicated dashboard for city crews featuring real-time HTML5 Canvas charts (category breakdowns and neighborhood incident velocity), GeoJSON/CSV open data exports, and a one-click Official 311 Work Order Generator with print-to-PDF formatting and tracking barcodes.

How we built it

We wanted CivicRelay to be completely reliable, lightning fast, and zero-setup, meaning anyone—from a resident on an old phone to a city inspector on a tablet—can run it without build steps or broken dependencies.

  • Frontend & Mapping: Built with semantic HTML5, modern CSS3 variables, and Leaflet.js using high-contrast Carto map tiles and custom SVG pins.
  • Spatial Math: Implemented the mathematical Haversine formula in pure vanilla JavaScript to calculate real geodesic meter distances between latitude/longitude points without requiring heavy external geo-libraries.
  • Client-Side AI Triage: Created an assistive multi-modal vision triage engine with realistic confidence calibration and severity tagging.
  • Data Visualization: Built native HTML5 Canvas donut and horizontal bar charts with zero external charting library bloat.
  • Persistence & Exports: Resilient localStorage architecture with full export pipelines for RFC-compliant CSV and GIS-standard GeoJSON feature collections.

Challenges we ran into

  • Leaflet Map Lifecycle Sync: Managing multiple map instances (the overview preview map, the full explore radar, and the modal pin dropper) was tricky because Leaflet needs precise container dimensions. If a map initializes while hidden in a tab, tiles render incorrectly. We solved this by implementing targeted invalidateSize() hooks whenever view tabs or modals toggle.
  • Tuning Spatial Deduplication: We couldn't just check text matching because people describe the same hazard differently ("pothole near bus stop" vs "hole in bike lane on Riverside"). We combined keyword normalization with a strict 200-meter geodesic radius check so nearby reports on the same block trigger the duplicate alert without blocking distinct issues a few streets over.
  • Official Print Layouts: Getting the Municipal 311 Work Order modal to format cleanly both on screen and when triggering window.print() required dedicated CSS print styling and custom barcode vectors.

Accomplishments that we're proud of

  • Zero-dependency architecture: The entire app runs directly out of the box in any browser with zero npm packages or build failures.
  • The spatial duplicate detection genuinely solves a real-world municipal problem. In our simulation, it intercepts over 40% of redundant tickets and converts them into verified community upvotes.
  • The UI feels warm, responsive, and approachable for everyday neighbors rather than looking like cold, clunky government software.

What we learned

  • How municipal work orders are actually dispatched across different public divisions (Transportation & Public Works vs Austin Energy vs Resource Recovery).
  • Practical spatial mathematics for local coordinate systems and geodesic calculations.
  • Designing for digital accessibility, including high-contrast badges, keyboard focus handling, and native browser speech synthesis.

What's next for CivicRelay

  • Connecting real webhooks to the City of Austin's open 311 / Socrata API to test live bidirectional dispatching.
  • Adding offline-first PWA caching so residents can photograph and log hazards in cellular dead zones.
  • A "Community Cleanup" volunteer module where neighbors can organize weekend workdays for non-emergency issues like park litter and overgrown community gardens.

Built With

Share this project:

Updates

Submission history