UrbanEye

Aplicación ciudadana para reportar en tiempo real problemas urbanos (baches, luminarias apagadas, basura acumulada, vandalismo, etc.) con foto, ubicación y comentarios, priorizando una experiencia mobile first.

Capacidades principales:

• Autenticación de usuarios y manejo por rol (ciudadano / autoridad).
• Creación de reportes con categoría, descripción, imagen y coordenadas en mapa.
• Visualización y seguimiento de reportes en lista/mapa.
• Priorización comunitaria mediante votos.
• Flujo de estados operativo: nuevo → en_revision → en_proceso → resuelto.

---

Requisitos

• Node.js 20+
• npm 10+
• Proyecto de Supabase con Auth, DB y Storage

---

Instalación

1. Clonar el repositorio.
2. Instalar dependencias:

npm install

3. Crear archivo de entorno local:

cp .env.example .env.local

En Windows PowerShell, puedes usar:

Copy-Item .env.example .env.local

---

Variables de entorno

Completa .env.local con:

VITE_SUPABASE_URL=
VITE_SUPABASE_PUBLISHABLE_KEY=
VITE_MAP_TILE_URL=https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png

Notas:

• VITE_SUPABASE_URL y VITE_SUPABASE_PUBLISHABLE_KEY son obligatorias.
• VITE_MAP_TILE_URL define el proveedor de tiles del mapa.

---

Ejecución local

Iniciar modo desarrollo:

npm run dev

Build de producción:

npm run build

Previsualizar build:

npm run preview

---

Scripts útiles

• npm run dev → servidor de desarrollo.
• npm run build → build de producción.
• npm run preview → preview local del build.
• npm run lint → validación estática.
• npm run test → ejecución de tests.
• npm run test:watch → tests en modo watch.
• npm run test:coverage → tests + cobertura.
• npm run format → formateo de código.
• npm run format:check → validar formato.

---

Stack

• Frontend: React + TypeScript + Vite
• Routing: React Router
• Estado servidor/cache: TanStack Query
• Formularios: React Hook Form + Zod
• Mapas: Leaflet + React-Leaflet
• Backend/BaaS: Supabase
• Estilos: Tailwind CSS
• Testing: Vitest + Testing Library

---

Estructura principal

src/
	app/
	features/
		auth/
		reports/
		map/
		profile/
	shared/

---

Documentación detallada

Para el detalle completo por tema:

1. Producto, arquitectura y flujos
2. Tecnologías y paquetes
3. Entorno, setup y roles
4. Roadmap, testing y calidad