Tutti Sport
PWA (Progressive Web App) para registrar entrenos: rutinas de gimnasio serie a serie con gráficas de progresión, y también bici, Hyrox u otros deportes en un calendario mensual. Los datos se sincronizan en la nube con Firebase y la app funciona también sin conexión.
👉 App: gym-marta.netlify.app
Capturas
Funcionalidades
- Rutinas múltiples: crea, renombra y elimina rutinas (p. ej. "Día A – Pierna", "Día B – Torso").
- Ejercicios con número de series, rango de repeticiones y unidad de carga (
kg, bloques o goma).
- Reordenar ejercicios: mantén pulsada una tarjeta y arrástrala arriba o abajo.
- Registro de entrenos serie a serie (peso × reps), con fecha editable.
- Historial por ejercicio, con opción de borrar registros sueltos.
- Gráficas de progreso (Chart.js): peso máximo, media de reps por serie y reps totales.
- Calendario mensual: los días entrenados se pintan de color. Los días de gym salen solos a partir de los registros, y se pueden añadir otros entrenos (bici, Hyrox u otro) con duración y notas. Si un día tiene varios, la casilla se divide en colores.
- Modo claro y oscuro: sigue el del móvil hasta que eliges uno con el botón de la barra superior.
- Copias de seguridad: la app guarda una copia diaria de tus datos en Firestore (las últimas 14) y se pueden restaurar con un botón. También se pueden exportar e importar en un archivo
.json.
- Papelera: los ejercicios eliminados se pueden restaurar (se guardan los últimos 20).
- Cuentas de usuario con email y contraseña (Firebase Auth).
- Sistema de aprobación: las cuentas nuevas quedan pendientes hasta que la administradora las aprueba desde un panel dentro de la app.
- Instalable y offline: Service Worker + manifest, y persistencia offline de Firestore.
Tecnologías
| Parte | Tecnología |
|---|
| Frontend | HTML, CSS y JavaScript sin framework ni build |
| Autenticación | Firebase Authentication (email/contraseña) |
| Base de datos | Cloud Firestore |
| Gráficas | Chart.js 4.4.7 (CDN) |
| Offline / PWA | Service Worker (sw.js) + manifest.json |
Estructura
├── index.html # Estructura: login, pantalla de pendiente y app
├── app.js # Lógica: auth, Firestore, render, modales y gráficas
├── styles.css # Estilos (tema claro/oscuro automático, mobile-first)
├── sw.js # Service Worker (caché de assets, excluye llamadas a Firebase)
├── manifest.json # Manifest de la PWA
├── icon.svg # Logo (macedonia de rodajas: naranja, lima y lila) e icono de la pestaña
├── icon-*.png # Iconos de la app para iPhone (180) y Android (192, 512)
├── img/ # Capturas de pantalla para el README
├── firestore.rules # Reglas de seguridad de Firestore
└── LICENSE # Licencia MIT
Modelo de datos (Firestore)
profiles/{uid}
email: string
approved: boolean
createdAt: "YYYY-MM-DD"
users/{uid}
activeRoutine: number
routines: [
{
name: string,
exercises: [
{ name, sets, reps, weight, unit, done, logs: [ { date, weights[], reps[] } ] }
]
}
]
trash: [ { routineIndex, exercise, deletedAt } ]
activities: [ { date, type: 'gym' | 'bike' | 'hyrox' | 'other', minutes, notes } ]
users/{uid}/backups/{id}
savedAt: ISO date
data: { ...copia completa de users/{uid} }
Puesta en marcha
1. Crear el proyecto en Firebase
- Crea un proyecto en la consola de Firebase.
- Activa Authentication → Email/Password.
- Crea una base de datos Cloud Firestore.
- Registra una app web y copia su configuración en
firebaseConfig, al principio de app.js.
- Crea la cuenta administradora desde la app, copia su UID (en Authentication → Usuarios de la consola) y ponlo en
ADMIN_UID, al principio de app.js.
2. Reglas de seguridad de Firestore
La comprobación de "cuenta aprobada" y de "admin" se hace en el navegador, así que la seguridad real depende de las reglas de Firestore. Las reglas están en firestore.rules; cópialas en Firestore → Reglas de la consola (cambiando el UID de la admin por el tuyo) y publícalas. Garantizan que:
- Cada usuario solo puede leer y escribir sus propios datos, y solo si está aprobado.
- Un usuario nuevo solo puede crear su perfil como pendiente y con su email real.
- Solo la admin puede ver las solicitudes y aprobar cuentas.
3. Ejecutar en local
No hace falta instalar nada: basta con servir la carpeta con cualquier servidor estático (el Service Worker no funciona abriendo el HTML con file://).
# Con Python
python -m http.server 8000
# o con Node
npx serve .
Y abre http://localhost:8000.
4. Desplegar
Al ser un sitio estático, se puede publicar tal cual en Netlify, GitHub Pages, Firebase Hosting, Vercel, etc. Recuerda añadir el dominio en Firebase → Authentication → Settings → Authorized domains.
Cuando cambies archivos estáticos, sube la versión de CACHE_NAME en sw.js para que los usuarios reciban la versión nueva.
Sobre la API key de Firebase
La apiKey que aparece en app.js no es un secreto: Firebase la diseña para ir en el código del cliente y solo identifica el proyecto. La protección de los datos la dan las reglas de Firestore (ver arriba). Aun así, es buena práctica:
Uso
- Crea una cuenta. Si no eres la admin, espera a que te aprueben.
- Crea una rutina con el botón + de las pestañas.
- Añade ejercicios con el botón flotante +.
- Pulsa Registrar entreno en un ejercicio para apuntar las series del día.
- Consulta el historial y las gráficas de progreso debajo de los ejercicios.
- En Calendario (menú inferior) ve los días entrenados del mes y añade entrenos de bici, Hyrox u otros con el botón +.
- (Admin) Usa el icono 👥 para aprobar solicitudes pendientes.
Licencia
MIT © Marta Torres Gómez
