Saltar al contenido
Portafolio
App móvil · Seguridad comunitaria

Culiacán Seguro

App comunitaria de seguridad: reportes verificados por la comunidad y moderación, mapa en tiempo real, rutas que evitan lo reportado, alertas por zona, contactos de confianza y botón de pánico.

Cliente
Proyecto propio · Piloto escolar
Año
2026
Rol
Autor · Desarrollo Full Stack
ReactTypeScriptSupabasePostgreSQLCapacitorCloudflare
safeapp-cln.pages.dev
Captura de Culiacán Seguro
Culiacán Seguro en teléfono
PWA + nativa
iPhone, Android y computadora
Tiempo real
Incidentes sin recargar la página
8
Categorías de incidente
0
Datos del autor expuestos en público
El reto

En Culiacán la información sobre bloqueos e incidentes circula por grupos de mensajería, sin verificar y sin ubicación clara. La idea era ordenar esos avisos en un mapa confiable, sin exponer a quien reporta y sin presentar rumores como hechos.

La solución

Diseñé y desarrollé una app instalable desde el navegador (y como app nativa) donde la gente reporta lo que ve, la comunidad lo confirma o desmiente, moderación lo publica y todos lo ven en un mapa en tiempo real. Suma rutas que esquivan lo reportado, alertas por zona, contactos de confianza, botón de pánico y "voy llegando".

Cómo lo construí

Decisiones que hacen la diferencia.

  1. 01

    Mapa en tiempo real

    Leaflet con OpenStreetMap y Supabase Realtime: un incidente publicado aparece en todos los teléfonos conectados sin recargar.

  2. 02

    Geografía en la base de datos

    PostgreSQL con PostGIS calcula zonas, alertas por cercanía y qué rutas cruzan un incidente reportado.

  3. 03

    Una base de código, tres plataformas

    PWA instalable con notificaciones push y la misma app empaquetada con Capacitor para Android e iOS, con ubicación en segundo plano para pánico y "voy llegando".

  4. 04

    Privacidad y permisos en el servidor

    El rol se valida en el servidor, los reportes son anónimos y las fotos pierden sus metadatos antes de guardarse. Pruebas de integración, E2E y accesibilidad con axe.

Galería

Pantalla por pantalla

1 / 4

Página de presentación

En el teléfono

Diseñado primero para pantallas pequeñas. Desliza para ver más.

  • Culiacán Seguro: Mapa en vivo

    Mapa en vivo

  • Culiacán Seguro: Reportar un incidente

    Reportar un incidente

  • Culiacán Seguro: Rutas que evitan lo reportado

    Rutas que evitan lo reportado

  • Culiacán Seguro: Alertas por zona

    Alertas por zona

  • Culiacán Seguro: Botón de pánico

    Botón de pánico

  • Culiacán Seguro: Historial y mapa de calor

    Historial y mapa de calor

  • Culiacán Seguro: Presentación en teléfono

    Presentación en teléfono

Resultados

Lo que cambió.

  • Flujo completo de reporte → verificación → publicación en segundos.
  • Funciona como app en iPhone y Android sin pasar por tiendas de apps.
  • Privacidad por diseño: reportes anónimos y fotos sin metadatos de ubicación.
Siguiente proyecto
Star Scent MX
Catálogo E-commerce

¿Quieres un proyecto así?

Cuéntame qué necesitas y te respondo con una propuesta clara, tiempos y siguientes pasos.

Hablemos