San Francisco publishes a huge amount of public data, but most residents never get a clear answer to a simple question: “Where is help needed most right now?”

Civic Signal was inspired by the gap between open data and real community action. I wanted to make city data understandable and useful for residents, nonprofits, and local teams.

## What It Does

Civic Signal turns live SF311 requests into:

  • Neighborhood priority rankings
  • Interactive neighborhood switching
  • Signal summaries and issue breakdowns
  • Recommended community actions
  • Shareable field briefs

The goal is simple: see the need, choose the next move, and act.

## How I Built It

I built the project as a lightweight static web app using HTML, CSS, and JavaScript.

It connects directly to the official SF Open Data Socrata API and groups recent 311 requests by neighborhood. The interface includes:

  • A live SF311 data query
  • Demo fallback data when the public API is unavailable
  • Interactive map pins and neighborhood rankings
  • A neighborhood picker
  • Responsive UI for desktop and mobile
  • A generated San Francisco hero image
  • Docker deployment through DigitalOcean App Platform

The app is deployed on DigitalOcean and automatically served from the GitHub repository.

## Challenges

The original GitHub repository was empty, so I created the product from scratch.

The SF311 dataset also uses different naming conventions for neighborhoods. For example, the dataset calls SoMa “South of Market,” so I had to normalize those names to keep the live data, map pins, and UI profiles synchronized.

Another challenge was making the data feel actionable instead of turning the project into another dashboard. I focused on connecting every signal to a neighborhood and every neighborhood to a practical next step.

DigitalOcean deployment also required working around GitHub access settings and manually triggering App Platform deployments from the public repository.

## What I Learned

I learned that open data is only useful when people can understand what it means and what to do next.

The strongest product is not the one with the most charts. It is the one that helps someone move from information to action quickly.

Civic Signal taught me how to combine public data, lightweight frontend engineering, interaction design, and deployment infrastructure into a working civic product.

Share this project:

Updates