Skip to content
BranchesTags

Repository files navigation

Bachecito - Contexto del Proyecto

Donde la Tecnologia Da Vida a las Ideas

Que es Bachecito?

Bachecito es una aplicacion movil que permite a cualquier ciudadano reportar baches en su ciudad de forma rapida, sencilla y con evidencia fotografica. Con una foto, una ubicacion automatica y un toque, el reporte queda registrado, visible para la comunidad y listo para ser atendido.

"Un bache reportado es un bache que puede ser reparado."

El Problema

En Mexico, los baches son una de las problematicas urbanas mas comunes y menos atendidas:

  • Sin canal accesible: Los ciudadanos no tienen una forma facil de reportar. Las opciones tradicionales (llamadas telefonicas, burocracia municipal) son lentas, opacas y frustrantes.
  • Sin evidencia: Los reportes verbales o por texto no tienen foto, no tienen ubicacion exacta, y se pierden en el sistema.
  • Sin seguimiento: Una vez que el ciudadano reporta, no sabe que paso. No hay retroalimentacion, no hay transparencia.
  • Riesgos reales: Los baches causan accidentes de transito, danos a vehiculos, lesiones a peatones y ciclistas, y costos economicos significativos.
  • Desigualdad de impacto: Las zonas mas afectadas suelen ser las de menor recurso, donde la infraestructura ya es precaria.

El problema no es solo el bache. El problema es que nadie hace nada al respecto.

La Solucion

Bachecito resuelve esto con una experiencia de usuario pensada para ser instantanea:

┌─────────────────────────────────────────────────────┐
│                                                     │
│   📸 Tomar foto     →   📍 Ubicacion automatica     │
│         ↓                      ↓                    │
│   📝 Descripcion    →   ⚡ Seleccionar prioridad    │
│         ↓                      ↓                    │
│   🚀 Enviar reporte →   ✅ Listo en 60 segundos     │
│                                                     │
└─────────────────────────────────────────────────────┘

Flujo Completo

Paso Que hace el usuario Que hace la app
1. Reportar Presiona el FAB central Abre la camara con encuadre guia
2. Capturar Toma la foto del bache Comprime y almacena temporalmente
3. Ubicacion Espera (automatico) Obtiene GPS + geocoding inverso
4. Detalles Agrega descripcion y prioridad Valida campos y muestra preview
5. Enviar Confirma Sube foto a Supabase Storage + inserta en DB
6. Seguimiento Consulta sus reportes Muestra timeline: Nuevo → Verificado → En Proceso → Reparado
7. Explorar Navega la lista de reportes Filtra por estado, prioridad, o busca por texto
8. Mapa Ve el mapa interactivo Muestra todos los reportes como puntos geolocalizados

Caracteristicas Principales

📸 Camara Inteligente

  • Encuadre visual con esquinas guia para enfocar el bache
  • Permisos manejados con fallback amigable
  • Foto comprimida al 70% de calidad para optimizar subida

📍 Geolocalizacion Automatica

  • GPS de alta precision (Expo Location)
  • Geocoding inverso: convierte coordenadas a direccion legible
  • Boton de actualizar ubicacion si es necesario

🏷️ Sistema de Prioridades

  • Peligroso (rojo) - Baches grandes, en carriles principales, riesgo alto
  • Sospechoso (naranja) - Baches moderados, requieren atencion
  • Menor (amarillo) - Baches pequenos, molestia baja

📊 Timeline de Seguimiento

● Nuevo           → El reporte acaba de llegar
● Verificado      → Alguien confirmo que el bache existe
● En proceso      → Las autoridades estan trabajando en el
● Reparado        → El bache fue resuelto

🔍 Explorar y Filtrar

  • Busqueda por descripcion o direccion
  • Filtros por estado (nuevo, verificado, en proceso, reparado)
  • Filtros por prioridad (peligroso, sospechoso, menor)
  • Tarjetas con foto, badges de estado, ubicacion y fecha

🗺️ Mapa Interactivo

  • Todos los reportes visibles como puntos en un mapa
  • Datos en tiempo real desde Supabase
  • Vista panoramica de la ciudad

🔐 Autenticacion

  • Login y registro con email/contraseña
  • Sesiones persistentes con Supabase Auth
  • Cada reporte vinculado al usuario que lo creo

👤 Perfil de Usuario

  • Lista de reportes propios con estado
  • Avatar con iniciales del email
  • Cierre de sesion seguro

Arquitectura Tecnica

┌──────────────────────────────────────────────────────────┐
│                     BACHECITO APP                         │
│                                                          │
│  ┌────────────┐  ┌────────────┐  ┌────────────────────┐  │
│  │  MapaTab   │  │ ExplorarTab│  │   AlertasTab       │  │
│  │ (MapView)  │  │ (FlatList) │  │ (Timeline View)    │  │
│  └─────┬──────┘  └─────┬──────┘  └─────────┬──────────┘  │
│        │               │                   │              │
│  ┌─────┴───────────────┴───────────────────┴──────────┐  │
│  │              Custom Tab Bar (FAB Central)           │  │
│  └────────────────────────┬───────────────────────────┘  │
│                           │                              │
│  ┌────────────────────────┴───────────────────────────┐  │
│  │              React Navigation 7                    │  │
│  │         (Stack + Bottom Tabs)                      │  │
│  └────────────────────────┬───────────────────────────┘  │
│                           │                              │
│  ┌────────────────────────┴───────────────────────────┐  │
│  │                  AuthContext                        │  │
│  │           (Supabase Auth Provider)                 │  │
│  └────────────────────────┬───────────────────────────┘  │
│                           │                              │
└───────────────────────────┼──────────────────────────────┘
                            │
                   ┌────────┴────────┐
                   │    SUPABASE     │
                   │                 │
                   │  ┌───────────┐  │
                   │  │ PostgreSQL│  │
                   │  │ Database  │  │
                   │  └───────────┘  │
                   │  ┌───────────┐  │
                   │  │   Auth    │  │
                   │  │ (JWT)     │  │
                   │  └───────────┘  │
                   │  ┌───────────┐  │
                   │  │  Storage  │  │
                   │  │ (Fotos)   │  │
                   │  └───────────┘  │
                   └─────────────────┘

Stack Tecnologico

Capa Tecnologia Version Funcion
Framework React Native 0.86.0 Base cross-platform
SDK Expo SDK 57 Herramientas de desarrollo
UI NativeWind 4.2.5 Estilos con Tailwind CSS
Navegacion React Navigation 7.x Stack + Bottom Tabs
Backend Supabase 2.108 DB + Auth + Storage
Mapas react-native-maps 1.27.2 Mapa interactivo
Camara Expo Camera 56.x Captura fotografica
Ubicacion Expo Location 56.x GPS + Geocoding
Iconos Ionicons via @expo/vector-icons Iconografia
Animaciones Reanimated 4.3.1 Transiciones suaves

Estructura del Proyecto

bachecito/
├── App.js                    # Entry point
├── app.json                  # Configuracion Expo
├── package.json              # Dependencias
├── src/
│   ├── AppNavigator.jsx      # Navegacion principal (Stack + Tabs)
│   ├── components/
│   │   ├── CustomTabBar.jsx  # Tab bar flotante con FAB
│   │   └── MapViewWeb.jsx    # Componente de mapa
│   ├── context/
│   │   └── AuthContext.jsx   # Provider de autenticacion
│   ├── lib/
│   │   └── supabase.js       # Cliente Supabase
│   ├── screens/
│   │   ├── MapaScreen.jsx    # Vista de mapa
│   │   ├── ExplorarScreen.jsx# Lista y filtros de reportes
│   │   ├── ReportarScreen.jsx# Flujo de reporte (camara → form → envio)
│   │   ├── AlertasScreen.jsx # Timeline de reportes del usuario
│   │   ├── PerfilScreen.jsx  # Perfil + auth + historial
│   │   └── TestScreen.jsx    # Pantalla de pruebas
│   └── services/
│       ├── auth.js           # Funciones de login/registro/logout
│       └── reports.js        # Funciones de CRUD de reportes
├── assets/                   # Iconos y imagenes
├── docs/                     # Documentacion
├── global.css                # Estilos globales (Tailwind)
├── tailwind.config.js        # Configuracion Tailwind
└── babel.config.js           # Configuracion Babel

Base de Datos (Supabase)

Tabla: reports

Campo Tipo Descripcion
id UUID Identificador unico
foto_url TEXT URL de la foto en Supabase Storage
descripcion TEXT Descripcion opcional del bache
latitud FLOAT Coordenada latitude
longitud FLOAT Coordenada longitude
direccion TEXT Direccion legible (geocoding inverso)
prioridad ENUM peligroso / sospechoso / menor
estado ENUM nuevo / verificado / en_proceso / reparado
user_id UUID FK al usuario que reporto
created_at TIMESTAMP Fecha de creacion

Storage Bucket: report-photos

  • Almacena las fotos de reportes en public/report_[timestamp]_[random].jpg
  • ContentType: image/jpeg
  • Acceso publico via URL

ODS 11 - Ciudades y Comunidades Sostenibles

Bachecito contribuye directamente al Objetivo de Desarrollo Sostenible 11 de la ONU:

Meta 11.2

"Proporcionar acceso a medios de transportes seguros, acessibles, economicos y fiables para todas las personas"

Bachecito: Los baches representan un riesgo directo para peatones, ciclistas y conductores. Reportarlos de forma rapida y visible permite priorizar su reparacion.

Meta 11.6

"Reducir el impacto ambiental negativo per capita de las ciudades"

Bachecito: La reparacion oportuna de baches reduce accidentes, danos vehiculares y costos economicos asociados al deterioro de la infraestructura vial.

Meta 11.a

"Apoyar los vinculos positivos entre zonas urbanas, suburbanas y rurales"

Bachecito: Conecta al ciudadano directamente con las autoridades a traves de un canal digital transparente y con evidencia.

Diferenciadores

Feature Bachecito WhatsApp/Redes Paginas web municipales
Geolocalizacion automatica ✅ ❌ ❌
Foto con encuadre guia ✅ ❌ ❌
Seguimiento de estado ✅ ❌ ❌
Mapa interactivo ✅ ❌ ❌
Filtros por prioridad ✅ ❌ ❌
Base de datos estructurada ✅ ❌ ⚠️
Acceso desde cualquier celular ✅ ✅ ⚠️
Sin necesidad de crear cuenta ❌ ✅ ❌

Estado Actual

Item Estado
App funcional ✅ Completada
Camara + Foto ✅ Funcional
GPS + Geocoding ✅ Funcional
Auth (Login/Registro) ✅ Funcional
CRUD de reportes ✅ Funcional
Timeline de estados ✅ Funcional
Mapa interactivo ✅ Funcional
Busqueda y filtros ✅ Funcional
UI/UX pulida ✅ Completada
Deploy en tiendas 🔜 Pendiente

Equipo

Integrante Rol Responsabilidades
Bruno Trujillo Ollivier Tech Lead / Full Stack Arquitectura, backend, base de datos, integraciones
Axel Ramirez Cruz Investigador / QA / Docs Testing, documentacion, investigacion de mercado
Yered Cordova Romero Frontend / UI/UX Diseno de interfaces, implementacion visual, experiencia de usuario
Ing. Emmanuel Hernandez Ortiz Asesor Academico Orientacion tecnica y academica

Universidad: IEU Universidad
Cuatrimestre: 3ro
Competencia: FEPRO 2026 - Categoria B (Retos Abiertos con Impacto Social)

Proximos Pasos

  1. Piloto en Puebla: Lanzar con un grupo de usuarios beta en una zona especifica
  2. Dashboard para municipios: Panel web para que las autoridades vean reportes y prioricen
  3. Moderacion comunitaria: Sistema de verificacion por otros usuarios
  4. Notificaciones push: Alertar al usuario cuando su reporte cambia de estado
  5. Gamificacion: Logros y puntos por reportes contribuidos
  6. Expansion: Adaptar la app a otras ciudades de Mexico

Contacto

  • Equipo: Bachecito
  • Universidad: IEU Universidad
  • Competencia: FEPRO 2026
  • Asesor: Ing. Emmanuel Hernandez Ortiz

"Porque un bache reportado es un bache que puede ser reparado.
Y una comunidad que reporta, es una comunidad que se cuida."

Documento de contexto del proyecto Bachecito - FEPRO 2026

About

Bachecito es una aplicacion movil que permite a cualquier ciudadano reportar baches en su ciudad de forma rapida, sencilla y con evidencia fotografica. Con una foto, una ubicacion automatica y un toque, el reporte queda registrado, visible para la comunidad y listo para ser atendido.

Topics

buapjsx

Resources

Readme
MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Contributors

Languages