01
Bandeja con el estado a la vista
Todos los avisos del municipio, filtrables por estado. Cada tarjeta dice de qué va, dónde está y en qué punto se encuentra, sin abrir nada.
Demo interactiva · App municipal
Una app de avisos ciudadanos que puedes probar aquí mismo.
Hecha con React Native y Expo. El vecino comunica una incidencia con foto y ubicación, recibe un número de registro y sigue en qué punto está. La misma base de código sirve para iOS, Android y para esta versión web que estás viendo.
Es una demo real y funciona con el ratón o el dedo. Si se te queda pequeña, ábrela a pantalla completa.
TecnologíaReact Native + Expo
PlataformasiOS, Android y web
AccesibilidadWCAG 2.2 nivel AA
Base de códigoUna sola, tres destinos
Qué hace
Tres pantallas y ningún paso de más.
La mayoría de apps municipales fallan por lo mismo: piden registro antes de dejarte hacer nada, esconden el estado del aviso y no funcionan con una mano en la calle. Esta va al revés.
02
Enviar en cuatro pasos
Categoría, qué ocurre, dónde y foto opcional. La ubicación se puede tomar del GPS del móvil o escribirse a mano si el vecino prefiere no darla.
03
Seguimiento con fechas
Número de registro y línea de tiempo: cuándo entró, quién lo valoró, cuándo se abrió la orden de trabajo y cuándo se cerró.
Accesibilidad
Lo que un informe de conformidad va a mirar.
Una app de una administración pública está sujeta al Real Decreto 1112/2018 y a la norma EN 301 549. Eso no se resuelve al final con un plugin: son decisiones que se toman mientras se construye cada pantalla.
Estas son las de esta demo, y todas se pueden comprobar en el propio código.
El estado nunca se dice solo con color
Cada etiqueta de estado lleva su texto además del color. Es el criterio 1.4.1, el que más se incumple en paneles de seguimiento.
Contraste verificado, no estimado
Todas las combinaciones de texto y fondo se midieron sobre la app ya construida. Dos grises no llegaban a 4,5:1 y se corrigieron.
Errores que se anuncian y llevan al campo
Si el formulario falla, aparece un resumen que el lector de pantalla lee en voz alta y el foco salta al primer campo que hay que corregir.
Semántica real, no cajas apiladas
Encabezados con su nivel, grupos de opciones anunciados como tal («opción 3 de 8») y cada tarjeta como un único elemento con todo su contexto.
Objetivos táctiles de 48 píxeles
WCAG 2.2 pide 24. Aquí se usa 48, incluido el botón de volver de la cabecera, que de serie venía a 30.
Teclado, idioma y movimiento
Contorno de foco visible para quien navega con tabulador, la página declara español y se respeta la preferencia del sistema de reducir animaciones.
Cómo está hecha
Una base de código, tres sitios donde funciona.
El proyecto es una app de React Native con Expo. De ahí sale el paquete para App Store, el de Google Play y también esta versión web, que es la que estás usando: HTML real, no un vídeo ni un lienzo dibujado.
Esa última parte no es un detalle. Una app web hecha así se puede enseñar, indexar y leer con un lector de pantalla; los frameworks que pintan sobre canvas, no.
React Native
Expo SDK 57
Expo Router
TypeScript
react-native-web
expo-location
expo-image-picker
Export estático
“Si la demo no se puede tocar desde el móvil del cliente, no es una demo: es una captura de pantalla con más pasos.”
Qué es y qué no
Hasta dónde llega esta demo.
Es una maqueta funcional, no un servicio en producción
El municipio es ficticio y los avisos viven en la memoria del navegador: al recargar vuelven a empezar. No se envía nada a ninguna administración. Para una implantación real haría falta añadir:
- Backend con registro de entrada y numeración oficial
- Identificación del ciudadano (Cl@ve o similar) cuando el trámite lo exija
- Panel interno para los servicios técnicos y las contratas
- Mapa con capas municipales y avisos duplicados
- Notificaciones push al cambiar el estado
- Información de protección de datos y política de conservación
¿Necesitas algo así para tu ayuntamiento o tu empresa?
Cuéntame qué proceso quieres llevar al móvil y para quién. Te digo si encaja como app nativa, como app web o como las dos, y con qué alcance conviene empezar.