Prime. Software Invisible.
"La mejor interfaz es la que no te hace pensar. La mejor base de datos es la que no te hace esperar."
El mercado del fitness digital está saturado de aplicaciones que son, en esencia, hojas de cálculo glorificadas. Te piden demasiados inputs, dependen de una conexión a internet estable y asumen que entrenas solo.
Prime nace de una frustración personal y técnica: la fricción. En un entrenamiento de alta intensidad, esperar 3 segundos a que cargue un spinner porque estás en el sótano del gimnasio rompe el flujo mental (Zone). Prime fue diseñada bajo un principio innegociable: Interacción de Latencia Cero (0ms).
No es solo una app de seguimiento; es un sistema de ingeniería local-first diseñado para ser invisible.
El Reto de Ingeniería: Arquitectura "Local-First"
La mayoría de las apps web modernas son "Cloud-First": la interfaz es una cáscara vacía que espera datos del servidor. Si la red falla, la app muere. Para Prime, invertí el modelo tradicional:
La Verdad está en el Dispositivo
La aplicación utiliza Dexie.js (una capa sobre IndexedDB) para almacenar el 100% de los datos (rutinas, logs, historial, perfiles) directamente en el navegador del usuario.
Sincronización Silenciosa
Un motor de sincronización personalizado (Sync Engine) escucha cambios en la base de datos local. Cuando detecta conexión, envía paquetes de datos a Supabase (PostgreSQL) en segundo plano.
Conflict Resolution
Si dos dispositivos editan la misma rutina offline, el sistema utiliza una estrategia de "Last-Write-Wins" basada en timestamps UTC precisos al milisegundo.
El Resultado: La interfaz responde instantáneamente a cada tap, slider o cambio de vista, independientemente de si estás en 5G o en Modo Avión.
// Ejemplo conceptual de la lógica de sincronización async function syncQueue() { const pendingChanges = await db.queue.toArray(); if (!navigator.onLine || pendingChanges.length === 0) return; // Background Sync sin bloquear la UI for (const change of pendingChanges) { try { await supabase.from(change.table).upsert(change.data); await db.queue.delete(change.id); } catch (error) { console.error("Sync retry scheduled", error); } } }
UX Innovation: El Modo "Gym Bro" (Multiusuario)
Aquí es donde el diseño se encuentra con la ingeniería. Un caso de uso ignorado por la industria es el entrenamiento en pareja ("Gym Bros").
El Problema: Compartir un solo teléfono entre dos personas obliga a salir de la sesión, cambiar de cuenta (log out/log in) y buscar la rutina de nuevo. Imposible de hacer entre series de 60 segundos de descanso.
La Solución Prime: Diseñé una arquitectura de estado global (Context API + Reducers) que puede sostener múltiples sesiones activas simultáneamente en memoria.
Una barra de navegación flotante permite alternar entre Perfil A y Perfil B con un solo tap. Al cambiar de usuario, la UI se "rehidrata" instantáneamente con los pesos, repeticiones y tiempos de descanso de ese usuario específico.
No hay llamadas al servidor. Todo ocurre en el cliente. Es tan rápido como cambiar de pestaña en el navegador.
Context Switching: < 16ms
The Brain: Algoritmos de Sobrecarga Progresiva
Prime no solo registra lo que haces; decide lo que deberías hacer. La app implementa lógica de negocio compleja en el frontend para automatizar la mejora física.
El Algoritmo RIR
En lugar de pedir al usuario que decida cuánto peso
subir, Prime analiza la sesión anterior. Desarrollé un hook personalizado
useSmartOverload que aplica la siguiente lógica:
- > Input: Peso, Reps, RIR.
- > Si Objetivo Cumplido AND RIR >= 2
- > Output: +2.5% a 5% sobre 1RM.
Asistente IA
Para el análisis a largo plazo, Prime integra la API de ChatGPT con un prompt de sistema específico de biomecánica. La app envía un JSON anonimizado con el volumen de las últimas 4 semanas y recibe diagnósticos en lenguaje natural.
Diseño Visual: Estética de Batería Baja
Como Design Engineer, sé que el diseño no es solo decoración; es función. En un gimnasio, las pantallas OLED consumen mucha batería si muestran fondos blancos.
• Fondo Base: #0A0A0F — Fondo inmersivo, casi negro puro. Píxeles OLED apagados = batería extra.
• Superficies: #1A1A2E — Cards y módulos con profundidad sutil sin perder contraste.
• CTA Principal: #22C55E (Action Green) — Botones primarios: "Empezar", "Calentamiento". Si es verde, se ejecuta.
• Acento Informativo: #3B82F6 (Prime Blue) — Tabs de usuario, sugerencias IA, datos activos.
"Verde = acción. Azul = información. Gris = contexto."
• Tipografía: Fuente del sistema (San Francisco / system-ui) para legibilidad máxima de números — pesos y tiempos visibles en un vistazo rápido entre series.
Stack Tecnológico & Métricas
La elección del stack no fue por moda, fue por rendimiento (Performance Budget).
| Tecnología | Rol en el Proyecto |
|---|---|
| React 19 | Motor de renderizado. Uso de Server Actions para mutaciones futuras. |
| Vite | Build tool. Hot Module Replacement instantáneo para desarrollo rápido. |
| Dexie.js | Wrapper de IndexedDB. El corazón de la arquitectura Offline-First. |
| React Router 7 | Gestión de rutas y carga de datos paralela. |
| Tailwind CSS | Estilado atómico. Cero CSS en tiempo de ejecución (Runtime). |
| Framer Motion | Animaciones de layout (LayoutShift) al añadir/quitar series. |
Resultados de Producción
¿Tu producto necesita esta ingeniería?
Si quieres una app que funcione sin internet, que responda en milisegundos, y con un diseño que no parezca un template — hablemos.
DISPONIBILIDAD
Q2 2026: 2 Plazas abiertas
Base en Barcelona | Remote Native
Book Intro.
Reserva 15 minutos para validar la viabilidad técnica de tu proyecto. Sin comerciales, directo con el ingeniero.