Vecinadmin es una plataforma integral de gestión comunitaria diseñada para centralizar la administración, comunicación y coordinación entre residentes, personal administrativo y zonas residenciales a través de una aplicación web y móvil nativa. Vecinadmin transforma la seguridad pasiva en activa mediante su sistema de alertas en tiempo real y empodera a la comunidad con herramientas de autogestión.

Problema que resuelve

La gestión de comunidades residenciales es desorganizada, con múltiples canales de comunicación dispersos y seguridad pasiva insuficiente. Esto genera falta de transparencia, comunicación ineficiente y pérdida de información. Vecinadmin centraliza las comunicaciones, historial completo y foros de discusión en una plataforma oficial y estructurada.

Gestión de staff por zona en Vecinadmin
Gestión de staff por zona en Vecinadmin

Vecinadmin Server

Vecinadmin Server es un servidor backend robusto diseñado para gestionar comunidades vecinales y conjuntos residenciales. El sistema no solo actúa como un registro de usuarios, sino que facilita la seguridad ciudadana mediante alertas en tiempo real, promueve la comunicación comunitaria a través de foros y noticias, y gestiona la logística de espacios y reuniones.

Stack tecnológico

  • Backend
    • stack/typescript icon TypeScript: Lenguaje principal del proyecto
    • stack/nodejs icon Node.js: Entorno de ejecución del servidor
    • stack/nest icon NestJS: Framework para estructurar el servidor
  • Base de datos
    • stack/postgres icon PostgreSQL: Base de datos relacional para almacenamiento de datos
    • stack/prismaorm icon Prisma ORM: ORM para interactuar con bases de datos SQL y NoSQL
  • Autenticación y seguridad
    • stack/jwt icon JWT: JSON Web Tokens para autenticación segura
    • 🔑 bcrypt: Librería para el hash de contraseñas
    • stack/passport icon Passport.js: Middleware de autenticación
  • Comunicación
    • stack/socketio icon Socket.IO (WebSockets): Comunicación en tiempo real entre cliente y servidor
    • stack/nats icon NATS: Sistema de mensajería para comunicación entre servicios
  • Validación
    • stack/typestack icon class-validator: Validación de datos entrantes
    • stack/typestack icon class-transformer: Transformación de objetos
    • 🥳 Joi: Validación de esquemas
  • Servicios externos e integraciones
    • stack/cloudinary icon Cloudinary: Servicio en la nube para gestión y optimización de imágenes
  • Utilidades
    • 🕰️ Luxon: Manejo de fechas y horas
    • stack/sharp_js icon Sharp: Librería para procesamiento de imágenes en el servidor
  • Testing
    • stack/jest icon Jest: Framework de pruebas para JavaScript y TypeScript
    • stack/jest icon Supertest: Librería para pruebas de APIs HTTP
  • Documentación de la API
    • stack/swagger icon Swagger UI: Interfaz de usuario para documentación y pruebas de APIs

Funcionalidades

  • Sistema de autenticación: El sistema implementa un módulo de autenticación que soporta múltiples estrategias, incluyendo autenticación local (con correo electrónico y contraseña) y autenticación mediante Google OAuth2, recuperación de contraseña y verificación de cuentas mediante tokens de confirmación.

  • Gestión de usuarios y roles: El sistema permite la creación y gestión de diferentes roles de usuario, como residentes/vecinos (resident), miembros del staff de la zona (staff), personal administrativo (administrator) y superusuarios (superuser), cada uno con permisos específicos para acceder a ciertas funcionalidades dentro de la plataforma.

  • Gestión de solicitudes de ingreso: Las personas que quieran formar parte como miembros del staff (staff) deben llenar un formulario con información personal y de contacto, la cual es verificada por el equipo de Vecinadmin para enviar un enlace de registro. Para ser administrador (administrator), un superusuario (superuser) puede invitar a otros usuarios a ser administradores, enviándoles un enlace de registro personalizado mediante correo electrónico.

  • Administración de zonas residenciales: Los miembros del staff pueden crear y gestionar zonas residenciales de forma independiente. Cada zona puede tener múltiples residentes asociados y ser administrada por varios miembros del staff. Las zonas pueden activarse o desactivarse y tienen información descriptiva con imágenes.

  • Permisos para miembros del staff: Los miembros del staff que fueron asignados a una zona residencial pueden tener permisos como el de moderar foros, gestionar noticias, administrar espacios comunes y coordinar reuniones. Esto es determinado por el creador de la zona que no es más que otro usuario de nivel staff.

  • Sistema de noticias y comunicados: Los usuarios de nivel staff pueden crear noticias y comunicados para mantener a los residentes informados sobre la situación de la zona residencial, eventos próximos o cualquier información relevante. Estas noticias pueden ser moderadas por otros miembros del staff y los administradores pueden eliminar cualquier noticia que consideren inapropiada.

  • Foros de discusión comunitaria: El sistema incluye foros donde los usuarios pueden interactuar, discutir temas relevantes y compartir información. Los miembros del staff (staff) como los administradores (administrator, superuser) tienen la capacidad de moderar estos foros para asegurar un ambiente respetuoso y constructivo.

  • Gestión de reuniones y asistencia: Los usuarios de nivel staff pueden convocar reuniones con información de título, descripción, ubicación, fecha y hora de inicio y fin. Los vecinos (resident) pueden confirmar su asistencia a estas reuniones desde la aplicación móvil escaneando un código QR, lo que permite una mejor organización y coordinación dentro de la comunidad.

  • Módulo crítico de alertas de emergencia: El sistema permite a los residentes reportar diferentes tipos de emergencias en tiempo real: emergencias médicas, problemas de seguridad, riesgos de incendio y solicitudes de taxi. Cada alerta queda registrada con tipo, reportante y timestamp, lo que facilita el seguimiento de las situaciones de emergencia.

  • Sistema de notificaciones en tiempo real: Sistema robusto de notificaciones que alerta a los usuarios sobre eventos relevantes mediante WebSockets. Soporta diferentes tipos de notificaciones (info, warning, error, success) con títulos, mensajes y enlaces de acción. Los usuarios pueden marcar notificaciones como leídas o eliminarlas.

  • Perfiles de usuario completos: Cada usuario tiene un perfil detallado con información personal: nombres, apellidos, teléfono, número de identidad con su tipo, fecha de nacimiento y foto de perfil. La información se gestiona de forma separada para mantener la privacidad y permitir actualizaciones independientes.

  • Carga de archivos multimedia: Integración con Cloudinary para gestionar la subida y optimización de imágenes. Las imágenes se procesan con Sharp antes de subirlas para garantizar formatos y tamaños adecuados. Las imágenes se utilizan en perfiles, noticias, zonas y directorios.

  • Sistema de confirmaciones por Email: El sistema implementa un microservicio dedicado para el envío de correos electrónicos mediante un canal de NATS, lo que permite una gestión eficiente y escalable de las comunicaciones por correo electrónico. El sistema puede enviar correos de recuperación de contraseña como de verificación de cuenta, cada uno respaldado por un token con determinada validez para ser utilizado.

  • Pruebas y calidad del código: Se implementan pruebas unitarias y end-to-end para asegurar la calidad y estabilidad del sistema. Se utilizan herramientas como Jest y Supertest para las pruebas y ESLint para mantener un código limpio y consistente.

Vista de noticias en Vecinadmin Web
Vista de noticias en Vecinadmin Web

Módulos

  • AuthModule: Autenticación y autorización (login, registro, OAuth, JWT).
  • UserModule: Gestión de usuarios y roles.
  • ProfileModule: Información de perfiles personales.
  • ZoneModule: Administración de zonas residenciales.
  • StaffModule: Gestión de personal administrativo.
  • ResidentModule: Administración de residentes.
  • NewsModule: Publicación y gestión de noticias.
  • DirectoryModule: Directorio de servicios locales.
  • ForumModule: Foros de discusión comunitaria.
  • MeetingModule: Convocatorias y asistencia a reuniones.
  • AlertModule: Sistema de alertas y emergencias.
  • RequestModule: Solicitudes de ingreso a zonas.
  • NotificationModule: Notificaciones del sistema.
  • SocketModule: Comunicación WebSocket en tiempo real.
  • ConfirmationModule: Tokens de confirmación por email.
  • UploadModule: Gestión de archivos multimedia.
  • TransportModule: Integración con NATS para microservicios.
  • DashboardModule: Estadísticas y métricas del sistema.
  • PrismaModule: Conexión y servicios de base de datos.

Modelo de datos

El diseño de la base de datos es relacional y se estructura de la siguiente manera:

Modelo de datos de Vecinadmin Server
Modelo de datos de Vecinadmin Server

Puedes ver el modelo de datos en diagrams.net: Modelo de datos de Vecinadmin Server

Prerrequisitos

  • Node.js (v18 o superior)
  • npm

Instalación y ejecución

  1. Clona el repositorio:

    git clone https://github.com/igidio/vecinadmin_server.git
    cd bdi-backend
  2. Instala las dependencias:

    npm install
  3. Configuración del entorno: Renombra el archivo de entorno de ejemplo y configura tus variables:

    cp .template.env .env
  4. Configuración de la base de datos: Si tienes Docker instalado, configura el archivo 📄docker-compose.yaml con los datos de tu instancia de PostgreSQL. Luego, ejecuta el siguiente comando para iniciar la base de datos PostgreSQL:

    docker-compose up -d
  5. Ejecuta migraciones y seeds: Asegúrate de que la base de datos esté corriendo y ejecuta las migraciones y seeds para preparar el esquema:

    # Ejecutar migraciones de Prisma
    npx prisma migrate dev
    # Ejecutar seeders para poblar datos iniciales
    npm run seed
  6. Inicia la aplicación:

    npm run start:dev

Si todo está configurado correctamente, la aplicación debería estar corriendo en 🔗http://localhost:3000.

Vecinadmin Client

Vecinadmin Client es la aplicación frontend del sistema Vecinadmin, proporcionando una interfaz de usuario moderna, intuitiva y responsiva para la gestión de comunidades residenciales, Es un Single Page Application (SPA) construida con Nuxt 4 que permiten a los miembros del staff (staff) y al personal administrativo (administrator, superuser) interactuar con las funcionalidades del sistema de manera eficiente y agradable. El cliente consume la API REST proporcionada por el servidor de Vecinadmin, controlando el acceso basado en roles y ofreciendo interfaces diferenciadas según el tipo de usuario.

Dashboard para usuarios de nivel staff
Dashboard para usuarios de nivel staff
Página de inicio de sesión
Página de inicio de sesión

Stack tecnológico

  • Frontend
    • stack/typescript icon TypeScript: Lenguaje principal del proyecto
    • stack/nuxt icon Nuxt 4: Framework de interfaz de usuario
    • stack/vue icon Vue 3: Framework de interfaz de usuario
    • stack/vite icon Vite: Herramienta de construcción rápida
    • stack/pinia icon Pinia: Gestión de estado para el manejo global de datos
  • UI
    • stack/tailwind icon Tailwind 4: Framework de estilos
    • stack/nuxt icon Nuxt UI: Componentes preconstruidos y reutilizables
    • stack/iconify icon Iconify: Iconos
  • Validación
    • stack/valibot icon Valibot: Validación de esquemas para TypeScript
  • Comunicación
    • stack/socketio icon Socket.IO (WebSockets): Comunicación en tiempo real entre cliente y servidor
  • Formateo de fechas
    • stack/fullcalendar icon Temporal Polyfill: Polyfill para soporte de la API 'Temporal'
    • 🕰️ Luxon: Manejo de fechas y horas
  • Utilidades
    • stack/schedulex icon Schedule-X: Librería para manejo de horarios y calendarios
    • stack/tiptap icon Tiptap: Editor de texto enriquecido
    • stack/google_maps icon Google Maps API: Integración de mapas y geolocalización
    • stack/echarts icon Apache ECharts: Librería de visualización de datos para gráficos interactivos
    • 🔳 QRCode: Generación de códigos QR
    • ✂️ Vue Advanced Cropper: Componente para recorte avanzado de imágenes
Vista de actividades y eventos programados con Schedule-X
Vista de actividades y eventos programados con Schedule-X

Funcionalidades

  • Flujos de autenticación: La aplicación implementa flujos de autenticación completos, incluyendo inicio de sesión, registro, recuperación de contraseña y verificación de cuenta. Utiliza JWT para mantener sesiones seguras y persistentes. El middleware global verifica credenciales en cada navegación redirigiendo automáticamente a usuarios no autenticados.
  • Dashboard personalizado por rol: Cada tipo de usuario (staff, administrator, superuser) tiene acceso a un dashboard personalizado que muestra información relevante y accesos directos a las funcionalidades que pueden utilizar según sus permisos.
  • Gestión visual de zonas residenciales: Interfaz completa para crear, editar y visualizar zonas residenciales con descripción enriquecida, asignación de staff con permisos granulares y gestión de residentes activos. Las zonas pueden ser activadas o desactivadas y se muestran con cards atractivas. Los miembros de staff que crearon la zona también van a poder asignar permisos a otros miembros del staff para que puedan moderar foros, gestionar noticias, administrar espacios comunes y coordinar reuniones.
  • Módulo de noticias con editor rico: Los miembros del staff pueden crear noticias utilizando un editor de texto enriquecido (Tiptap) que permite formato avanzado, inserción de imágenes y enlaces. Las noticias se muestran en un feed cronológico con opciones de moderación para otros miembros del staff y administradores.
  • Directorio de servicios con mapas interactivos: Catálogo visual de servicios locales con integración de Google Maps para mostrar ubicaciones, horarios y contacto.
  • Foro comunitario con comentarios: Espacio de discusión donde los usuarios pueden crear tópicos de conversación con editor de texto rico, visualizar hilos ordenados por fecha o popularidad, comentar en discusiones existentes y ver contadores de vistas y comentarios. Los administradores pueden habilitar o deshabilitar foros específicos y moderar contenido inapropiado, los miembros de staff autorizados pueden cerrar tópicos.
  • Calendario de reuniones y eventos: Visualización de reuniones comunitarias en calendario interactivo con Schedule-x, permitiendo múltiples vistas (diaria, semanal, mensual), los usuarios pueden ver detalles de reuniones, recibir confirmaciones visuales, cancelar reuniones, entre otros.
  • Panel de alertas: Los usuarios tienen acceso a una interfaz rápida y accesible para visualizar las alertas emitidas por los residentes (residents) con información vital para hacer seguimiento sobre los casos.
  • Gestión de solicitudes de ingreso: Portal para administrar las solicitudes de personas interesadas en formar parte del staff, donde el administrador puede revisar la información y aprobar o rechazar solicitudes, al aprobarse una solicitud el interesado recibe un correo con un enlace para completar su registro.
  • Notificaciones en tiempo real: Centro de notificaciones con preview de notificaciones desde un dropdown, clasificación por tipo (info, warning, error, success) y acciones rápidas para marcar como leídas o eliminar notificaciones. WebSocket actualiza el centro en tiempo real sin necesidad de recargar la página.
  • Interfaz de usuario responsiva: La aplicación está diseñada para ser completamente responsiva, asegurando una experiencia de usuario óptima en dispositivos de escritorio, tabletas y móviles.
  • Descarga de aplicación móvil: El sitio web está enfocado para usuarios de nivel staff, superuser y administrator, los usuarios de nivel resident que intenten acceder a la aplicación web son redirigidos a una página para descargar la aplicación móvil nativa, donde pueden obtenerla desde Google Play.
  • Modo claro y oscuro: La aplicación ofrece soporte para modo claro y oscuro, permitiendo a los usuarios elegir su preferencia de visualización para una experiencia más cómoda.
Vista de noticias
Vista de noticias
Gestión de solicitudes para miembros del staff en modo oscuro
Gestión de solicitudes para miembros del staff en modo oscuro

Módulos

  • pages/: Rutas automáticas de la aplicación.
  • components/: Componentes Vue reutilizables organizados por dominio.
  • store/: Stores de Pinia para gestión de estado.
  • composables/: Composables reutilizables.
  • layouts/: Layouts de aplicación.
  • middleware/: Middlewares globales.
  • plugins/: Plugins de Nuxt, donde se tiene la API para configuración de - fetch, authentication para estado de sesión, socket para WebSocket, - echarts_theme para temas de gráficos, entre otros.
  • interfaces/: Definiciones TypeScript de tipos de datos.
  • validations/: Esquemas de validación con Valibot y expresiones regulares.
  • utils/: Utilidades generales.
  • data/: Datos estáticos y configuración.
  • assets/: CSS y recursos estáticos.
Vista de directorio
Vista de directorio

Prerrequisitos

  • Node.js (v18 o superior)
  • npm
  • Instancia de Vecinadmin Server corriendo y accesible

Instalación y ejecución

  1. Clona el repositorio:

    git clone https://github.com/igidio/vecinadmin_client.git
    cd vecinadmin_client
  2. Instala las dependencias

    npm install
  3. Configuración del entorno: Renombra el archivo de entorno de ejemplo y configura tus variables, como lo son la dirección del servidor de Vecinadmin y las claves de API necesarias:

    cp .env.template .env
  4. Inicia la aplicación:

    npm run dev

La aplicación estará disponible en 🔗http://localhost:5173 (o la dirección que se muestre en la terminal).

Datos de prueba

Para probar la aplicación, puedes utilizar los siguientes datos de usuario creados mediante los seeders del servidor:

RolUsernameEmailContraseña
superuseruseroneuser1@example.compassword1
administratorusertwouser2@example.compassword2
staffuserthreeuser3@example.compassword3
residentuserfouruser4@example.compassword4

Vecinadmin Mail Service

Vecinadmin Mail Service es el microservicio especializado en el envío de correos electrónicos para la plataforma Vecinadmin. Actúa como un servicio independiente y desacoplado que gestiona toda la lógica relacionada con notificaciones por email, procesando solicitudes de envío mediante comunicación asíncrona a través de NATS y exponiendo endpoints HTTP para envíos directos.

El microservicio está diseñado para manejar distintos tipos de correos electrónicos críticos del sistema: recuperación de contraseñas, verificación de cuentas, invitaciones para staff y administradores, y notificaciones de rechazo de solicitudes. Su arquitectura ligera basada en Fastify garantiza alto rendimiento y baja latencia, mientras que la integración con NATS permite escalabilidad horizontal y desacoplamiento total del servidor principal.

Stack tecnológico

  • Backend
    • stack/typescript icon TypeScript: Lenguaje principal del proyecto
    • stack/nodejs icon Node.js: Entorno de ejecución del servidor
    • stack/fastify icon Fastify: Framework web para Node.js
  • Servicios de correo
    • stack/nodemailer icon Nodemailer: Librería para enviar correos electrónicos
    • stack/fastify icon Fastify Mailer: Plugin de Fastify para enviar correos electrónicos
  • Comunicación
    • stack/nats icon NATS: Sistema de mensajería para comunicación entre servicios
  • Validación
    • 🥳 Joi: Validación de esquemas
  • Utilidades
    • 🌿 Dotenv: Gestión de variables de entorno
    • stack/pinojs icon Pino Prettier: Herramienta para formatear los logs de Pino

Funcionalidades

  • Envío de correos mediante NATS: El microservicio se suscribe a un canal específico en NATS para recibir solicitudes de envío de correos electrónicos desde el servidor principal de Vecinadmin. Cada mensaje contiene la información necesaria para procesar el correo (tipo, destinatario, datos dinámicos) y el microservicio se encarga de generar y enviar el correo correspondiente.
  • Endpoints HTTP para envíos directos: Además del procesamiento asíncrono vía NATS, expone un endpoint POST /send-email que permite envíos directos mediante peticiones HTTP. Útil para testing, debugging o situaciones donde se requiere envío síncrono con respuesta inmediata del estado.
  • Generación dinámica de plantillas HTML: Utiliza plantillas HTML predefinidas para cada tipo de correo (recuperación de contraseña, verificación de cuenta, invitaciones para staff y administrador y notificaciones de rechazo) y las rellena dinámicamente con los datos proporcionados en cada solicitud.
Formulario de registro para miembros del staff, cuya confirmación enviará un correo con enlace para completar el registro
Formulario de registro para miembros del staff, cuya confirmación enviará un correo con enlace para completar el registro

Módulos

  • index.ts: Archivo principal que inicializa Fastify, configura el plugin de mailer, establece conexión con NATS, define la suscripción al canal de correos y expone el endpoint HTTP para envíos directos.
  • envs.ts: Gestión de variables de entorno utilizando Dotenv.
  • data.ts: Define los tipos y plantillas para emails.

Prerrequisitos

  • Node.js (v18 o superior)
  • npm
  • Instancia de NATS corriendo y accesible desde el servidor principal de Vecinadmin
  • Configuración de un servicio SMTP para el envío de correos (puede ser un servicio externo como SendGrid, Mailgun, o un servidor SMTP propio)

Instalación y ejecución

  1. Clona el repositorio:

    git clone https://github.com/igidio/vecinadmin_mailsv.git
    cd vecinadmin_mailsv
  2. Instala las dependencias:

    npm install
  3. Configura las variables de entorno: Renombra el archivo de entorno de ejemplo y configura tus variables, como lo son las direcciones de de Vecinadmin (server y client), las credenciales del servicio SMTP, y los encabezados de los correos:

    cp .env.template .env
  4. Inicia la aplicación:

    npm run dev

La aplicación estará disponible en 🔗http://localhost:5173 (o la dirección que se muestre en la terminal).

AppVecina

AppVecina es la aplicación móvil nativa del ecosistema Vecinadmin, diseñada para brindar a los residentes (residents) una experiencia optimizada y accesible para interactuar con su comunidad. Construida con Flutter, AppVecina está diseñada para ser el punto de contacto principal entre los residentes y su comunidad, permitiendo mantenerse informados, participar en discusiones, recibir alertas, registrar sus asistencias a eventos y coordinar con sus vecinos de manera sencilla e intuitiva desde la palma de su mano.

Pantalla principal de AppVecina
Pantalla principal de AppVecina
Pantalla de inicio de sesión
Pantalla de inicio de sesión

Stack tecnológico

  • Mobile
    • stack/dart icon Dart: Lenguaje de programación
    • stack/flutter icon Flutter: Framework para desarrollo de aplicaciones móviles
  • Gestión de estado
    • stack/riverpod icon Riverpod: Gestión de estado para Flutter
  • Navegación
    • stack/flutter icon Go Router: Gestión de rutas
  • Obtención de datos
    • stack/flutter icon Dio: Cliente HTTP para Dart y Flutter
    • stack/socketio icon Socket.IO (WebSockets): Comunicación en tiempo real entre cliente y servidor
  • UI
    • stack/google_fonts icon Google Fonts: Integración de fuentes personalizadas
    • stack/flutter icon Flutter SVG: Soporte para gráficos SVG
    • stack/iconify icon Iconify: Iconos
  • Persistencia local
    • stack/flutter icon Shared Preferences: Almacenamiento de datos local
  • Manejo de enlaces y URLs
    • 🔗 app_links: Soporte para deep linking
    • stack/flutter icon URL Launcher: Lanzamiento de URLs externas
  • Utilidades
    • 🌿 flutter_dotenv: Carga de variables de entorno
    • stack/google_maps icon Google Maps API: Integración de mapas y geolocalización
    • 🍞 fluttertoast: Muestra de mensajes emergentes (toasts)
    • stack/flutter icon Flutter Launcher Icons: Generación de íconos de aplicación
    • stack/flutter icon image_picker: Librería para seleccionar imágenes desde la galería o cámara
    • ✂️ image_cropper: Librería para recortar imágenes seleccionadas
    • 📱 mobile_scanner: Librería para escanear códigos QR con la cámara del dispositivo
    • 📄 flutter_html: Librería para renderizar HTML en Flutter
    • stack/dart icon intl: Librería para internacionalización y formateo de fechas, números y mensajes
    • 🔄 restart_app: Librería para reiniciar la aplicación programáticamente

Funcionalidades

  • Autenticación completa con persistencia de sesión: Sistema robusto de autenticación que soporta login con credenciales, recuperación de contraseñas mediante deep links desde emails y persistencia de sesión utilizando JWT almacenados localmente. La app verifica automáticamente si el usuario está autenticado al iniciar y redirige a la pantalla de login si no lo está.
  • Onboarding: AppVecina dispone de un flujo de onboarding interactivo para nuevos usuarios, presentando las funcionalidades clave de la aplicación mediante pantallas informativas y atractivas antes de acceder al login.
  • Visualización de noticias: Los residentes pueden acceder a un feed de noticias relevante para su zona residencial, con formato enriquecido (imágenes, enlaces) y ordenado cronológicamente. El feed de noticias se realiza con HTML renderizado para mostrar el contenido.
  • Directorio de servicios con Google Maps integrado: Catálogo interactivo de servicios locales con información detallada y la ubicación en mapa de Google Maps con marcadores personalizados.
  • Foros de discusión comunitaria: Espacio para que los residentes participen en discusiones relevantes para su comunidad, con hilos organizados por fecha y popularidad, y la capacidad de comentar en discusiones existentes.
  • Sistema de alertas de emergencia con botones rápidos: Interfaz crítica de emergencias con botones grandes y distintivos para reportar diferentes tipos de situaciones urgentes: emergencias médicas, problemas de seguridad, riesgos de incendio y solicitudes de taxi.
  • Centro de notificaciones en Tiempo Real: Widget de notificaciones con badge de contador que muestra notificaciones recibidas en tiempo real mediante Socket.IO.
  • Gestión de perfil con edición de foto: Pantalla de perfil personal donde los usuarios visualizan y editan su información. El flujo de actualización de foto incluye selección desde galería o cámara, recorte de imagen y optimización antes de subirla al servidor.
  • Confirmación de asistencia a reuniones mediante QR: Los residentes pueden confirmar su asistencia a reuniones comunitarias escaneando un código QR proporcionado por el personal administrativo, lo que facilita la organización y coordinación de eventos.
  • Configuración y preferencias de tema: En el panel lateral el usuario puede configurar preferencias de la aplicación, como el tema (claro/oscuro) acceder a las configuraciones o cerrar sesión.
  • Validación de formularios: Validadores en formularios de autenticación, perfil y otras entradas que verifican formatos correctos antes de enviar datos al servidor, proporcionando feedback visual inmediato sobre errores.
Pantalla de noticias
Pantalla de noticias
Onboarding
Onboarding
Vista de noticia
Vista de noticia

Módulos

La organización de la aplicación está inspirada en la arquitectura feature-first:

  • core/: Configuración global, temas, estilos y utilidades compartidas:

    • config/: Router con go_router y rutas de navegación.
    • data/: Datos estáticos, constantes.
    • handlers/: Manejadores de errores y respuestas HTTP.
    • layouts/: Layouts reutilizables.
    • models/: Modelos de datos.
    • providers/: Providers de Riverpod.
    • requests/: Funciones de peticiones HTTP genéricas.
    • service/: Servicios como lo son API con Dio, Deep linking, Image handling.
    • storages/: Gestión de SharedPreferences.
    • themes/: Temas claro y oscuro.
    • utils/: Utilidades generales.
    • widgets/: Widgets reutilizables
  • feature/: Funcionalidades organizadas por dominio:

    • welcome/: Pantalla de bienvenida/onboarding
    • auth/: Autenticación.
    • home/: Dashboard principal.
    • news/: Noticias y comunicados.
    • directory/: Directorio de servicios locales.
    • forum/: Foro de discusión comunitaria.
    • events/: Reuniones y eventos.
    • alert/: Sistema de alertas de emergencia.
    • notifications/: Centro de notificaciones.
    • zones/: Gestión de zonas asignadas.
    • options/: Configuración y preferencias.
    • scanner/: Escáner de códigos QR.
    • forbidden/: Pantalla de acceso denegado.
Pantalla de alertas
Pantalla de alertas
Directorio de servicios
Directorio de servicios

Prerequisitos

  • Flutter SDK 3.7.x o superior
  • Android Studio o Visual Studio Code con la extensión Flutter instalada
  • Un dispositivo Android o un emulador configurado para pruebas
  • Instancia de Vecinadmin Server corriendo y accesible para la aplicación móvil

Instalación y ejecución

  1. Clona el repositorio:

    git clone https://github.com/igidio/appvecina.git
    cd vecinadmin
  2. Configura las variables de entorno: Copia el archivo 📄.env.template a 📄.env y determina la dirección del servidor Vecinadmin (si está desplegado en un puerto distinto a 3000).

    cp .env.template .env
    # Edita el archivo .env con tus valores
  3. Inicia la aplicación en modo desarrollo:

    flutter run

Licencia

Este proyecto está bajo la Licencia MIT. Consulta el archivo 📄LICENSE.md de los proyectos para más detalles.

Más proyectos

© 2026 igidio