Caso de estudio  ·  PWA offline-first

Lleva tu grupo de
campamento desde
el móvil

Una app para pasar lista, consultar fichas médicas y registrar recogidas con firma. Funciona sin cobertura, cifra los datos de los menores en el propio dispositivo y se mantiene actualizada sin tocar una línea de código.

Ver demo en vivo Probar la demo
6
semanas de campamento
~100
niños gestionados
0
servidores backend
AES-256
cifrado en cliente
01 Funciones

Todo lo que un monitor
necesita en campo

Pensado para uso real durante la jornada: rápido, claro y sin depender de la cobertura del recinto.

Pasar lista
Check en un toque, contador en tiempo real y fecha seleccionable. Cada cambio se guarda al instante en el dispositivo.
Fichas médicas
Alergias, medicación, contactos de emergencia y permisos a un toque. Las condiciones críticas se resaltan con alerta.
Recogidas con firma
Quién recoge a cada niño, validado contra los autorizados y con firma manuscrita y hora. Avisa si la persona no está autorizada.
Horario y cuadrante
Franjas por grupo, deporte y taller del día, y la puerta de recogida de cada edad. Todo en una vista.
Datos cifrados
Las fichas de los menores viajan cifradas (AES-256-GCM) y se descifran solo en el dispositivo del monitor con su contraseña.
Multi-grupo y offline
Varias semanas y grupos por monitor, con historial propio. PWA instalable que funciona sin conexión tras la primera carga.
02 Demo interactiva

La app entera,
aquí mismo

Réplica funcional con datos ficticios. Descifra el acceso, cambia de grupo, pasa lista, abre una ficha médica y registra una recogida firmando en pantalla.

Datos de menores cifrados
AES-256-GCM · PBKDF2-SHA256

Las fichas no se guardan nunca en claro. Viajan cifradas en un JSON estático y solo se descifran en el dispositivo del monitor, con su contraseña. Sin servidor, no hay base de datos que filtrar.

01
Cambia de grupoToca la cabecera verde para alternar entre grupos del monitor
02
Pasa listaToca el círculo de cada niño — el contador se actualiza solo
03
Abre una ficha médicaToca un nombre o entra en la pestaña «Fichas»
04
Registra una recogidaEn «Recogidas», pulsa «Recoger» y firma en pantalla
0
Presentes
0
Ausentes
0
Con alerta
Datos ficticios — ningún dato real
03 Arquitectura

Se actualiza sola,
cada hora

El monitor nunca toca código. Una acción programada sincroniza, cifra y publica los datos sin intervención manual.

01
Google Sheets
El formulario de inscripción recoge datos médicos y contactos de emergencia.
02
GitHub Actions
Un cron horario descarga la hoja, cifra con AES-256-GCM y construye el bundle.
03
Cloudflare Pages
Despliegue global en el edge, con HTTPS automático y sin servidor propio.
04
Móvil del monitor
La app descifra en el dispositivo con la contraseña y funciona sin conexión.
04 Stack

Decisiones técnicas,
no opciones por defecto

Sin frameworks innecesarios. Cada elección responde a una restricción concreta del proyecto.

Frontend
Vanilla JS · CSSSin build step. App crítica en latencia y sencilla de mantener.
Cifrado
AES-256-GCM · Web CryptoPBKDF2-SHA256, 310k iteraciones. Descifrado solo en cliente.
Build
Python 3openpyxl + cryptography. Mejor manejo del Excel de inscripciones.
CI / CD
GitHub ActionsCron horario como backend de sincronización, sin servidor.
Hosting
Cloudflare PagesCDN global gratuito desplegado desde el propio pipeline.
App
PWA · Service WorkerInstalable y operativa sin conexión tras la primera carga.

Del formulario de inscripción
al móvil del monitor

Construido para el Campamento de Verano 2026 en Valmojado. Seis semanas, cerca de cien niños y ni una sola hoja de papel.

Abrir la demo GitHub