CiudadActiva - Bridging the gap between citizens and their Municipality (government)

This is a submission for the DEV Weekend Challenge: Community

The Community

This app was built for the citizens of San José Pinula, a municipality in Guatemala, and designed to scale to any municipality in my country (Guatemala).

San José Pinula is a growing urban area where residents face daily infrastructure problems like potholes that damage vehicles, broken streetlights that create unsafe conditions at night, water leaks that waste resources, and uncollected trash, among others. The real problem isn't that these issues exist, it's that there's no structured, accessible way for citizens to report them to local authorities.

Reports get lost in WhatsApp groups. Photos get buried in Facebook comments. The municipality has no centralized visibility into what problems exist, where, or how many people are affected. Problems go unaddressed for months (even years).

CiudadActiva was built for this community, giving every neighbor a direct, visual channel to communicate with their municipality, and giving the municipality a real-time dashboard to manage and respond.

What I Built

CiudadActiva is a mobile-first civic reporting web app with two sides:

For Citizens

• Submit a report with a photo or video, problem category, and exact GPS location (or tap on the map)
• Browse all reports on a public interactive map with color-coded markers by category
• Tap "This affects me too" to show community support for existing reports
• Share any report directly to social media or copy the link
• No account required, anonymous reporting is fully supported

For the Municipality

• Admin dashboard with all reports, filterable by municipality and status
• Change report status: Pending -> In Progress -> Resolved
• Stats panel: total reports, pending, in progress, resolved

Platform

• Multi-municipality support, built with municipality_id on every record from day one. Currently includes San José Pinula, Mixco, Fraijanes, Santa Catarina Pinula, Villa Canales, Villa Nueva, and Guatemala City.
• Fully responsive, mobile-first UI with direct camera access on smartphones
• Row Level Security is enforced at the database level via Supabase

Demo

Live app: https://ciudad-activa-gt.vercel.app

Code

ZarakiLancelot / ciudad-activa

Civic reporting app for municipalities in Guatemala — citizens report urban issues with photos, geolocation and community support.

CiudadActiva 🏙️

🇪🇸 Leer en Español / Read in Spanish

A civic reporting platform that empowers citizens to report urban problems directly to their municipality — with photos, exact location, and community support.

Built for the DEV Weekend Challenge 🏆

---

🌎 The Problem

In municipalities like San José Pinula, Guatemala, citizens have no efficient way to report urban issues (potholes, broken streetlights, water leaks, etc.) to local authorities. Reports get lost in WhatsApp groups or never reach the right people. Problems go unfixed for months.

CiudadActiva bridges that gap — giving every citizen a direct, visual, geolocated channel to communicate with their municipality, and giving municipalities a real-time dashboard to manage and respond to issues.

---

✨ Features

For Citizens

• 📍 Report issues with photo/video, category, and exact GPS location
• 🗺️ View all reports on an interactive public map
• ❤️ "This affects me too" — support existing reports with one tap
• …

View on GitHub

How I Built It

Tech Stack

Layer	Technology
Frontend	React 18 + TypeScript + Vite
Routing	React Router v7
Backend	Supabase (Auth, PostgreSQL, Storage)
Maps	Leaflet.js + React Leaflet + OpenStreetMap
Hosting	Vercel

Why Supabase as the entire backend

The biggest architectural decision was to eliminate a custom Node.js backend. Supabase gave me everything I needed out of the box:

• Anonymous Auth: citizens can report without creating an account
• Row Level Security: public read, auth-only write, admin-only updates
• Storage: photo and video uploads with public URLs
• Auto-generated REST API: no endpoints to write

This let me focus 100% of my weekend on the product, not infrastructure.

Maps without Google

Using Leaflet.js + OpenStreetMap kept the project fully free with no API keys required for maps. I also used Nominatim (OpenStreetMap's geocoding API) for reverse geocoding, automatically converting GPS coordinates into human-readable addresses.

Mobile-first camera access

On mobile, the report form offers two options for media: upload from the gallery or open the camera directly. This is handled with a capture="environment" attribute on a hidden file input, triggered via useRef for reliable behavior across iOS and Android browsers.

Multi-municipality from day one

Even though this is a pilot for San José Pinula, every table has a municipality_id column. Switching municipalities on the map filters reports and re-centers to the correct coordinates, with each municipality's official logo appearing in the loading spinner.

What I'd build next

• Push notifications when a report status changes
• Municipality analytics dashboard with charts
• PWA with offline support
• Duplicate detection by GPS proximity
• Self-service municipality onboarding

Thanks for this opportunity!