Sitio Web de Fitness Personal

Rastreador de fitness personal gratuito y sin cuenta construido con Next.js 15, Tailwind CSS, Framer Motion y Recharts.

ENLACE DE DEMOSTRACIÓN

Resumen

• Rol: Desarrollador Full-Stack y Diseñador UI/UX
• Tecnologías: Next.js 15, TypeScript, Tailwind CSS v4, shadcn/ui, Framer Motion, Recharts, Vitest, Playwright
• Resultado clave: Arquitectura de datos del lado del cliente privada y 100% sin servidor, con cero costos de configuración de bases de datos
• Resumen: Una plataforma de fitness personal gratuita y sin cuenta que cuenta con planes de entrenamiento personalizados, objetivos de calorías, seguimiento de progreso y registro de nutrición. Creada para uso personal para evitar las utilidades comerciales sobrecargadas, almacena todos los datos estrictamente en el almacenamiento local del navegador del cliente, sin requerir la creación de ninguna cuenta.

El Problema

• Desafío: Las plataformas de fitness comerciales bloquean características esenciales de seguimiento (como metas diarias personalizadas, desgloses de macronutrientes y registro de entrenamientos) detrás de costosos muros de pago por suscripción.
• Audiencia: Creado principalmente para el uso diario personal para tener una alternativa limpia, respetuosa con la privacidad y completamente gratuita frente a los rastreadores comerciales.
• Restricciones: Sin una base de datos de backend, almacenar estructuras relacionales como planes de entrenamiento, registros activos y alimentos personalizados requería un esquema de serialización confiable del lado del cliente.

Enfoque y Decisiones

• Arquitectura: Patrón React SPA (Single Page Application) local impulsado por Next.js App Router para la generación de la estructura inicial en el lado del servidor y ganchos dinámicos (hooks) de estado del lado del cliente.
• Decisiones Clave: Emplear 8 claves aisladas del almacenamiento local (localStorage) del navegador para que sirvan como tablas individuales de un esquema relacional, en lugar de integrar una base de datos externa.
• Compromisos: Se sacrificó la sincronización nativa entre dispositivos en favor de una privacidad completa e instantánea y de eliminar los costos de mantenimiento de alojamiento (con una función de importación/exportación manual de JSON integrada como respaldo).
• Flujo de Datos: Interacción del usuario -> Estado del hook de React -> Sincronización con localStorage -> Actualización dinámica de la interfaz de usuario y visualización con Recharts.

Resultados Clave e Impacto

• Resultado: Una utilidad diaria totalmente personalizada y adaptada exactamente a mi propio flujo de trabajo de entrenamiento y nutrición.
• Comparación: Evita los muros de pago, las barreras de registro y los altos costos de suscripción de los principales rastreadores comerciales.
• Impacto: Reemplazó por completo los rastreadores comerciales de calorías y entrenamientos para mi uso personal diario, manteniendo todas las métricas de salud de forma estrictamente local.

Análisis Técnico Profundo

• Detalles Destacados: Hooks personalizados de React que analizan de forma segura los datos serializados del localStorage para evitar desajustes en el SSR (Server-Side Rendering) y errores de hidratación en Next.js.
• Verificación: Flujo de la interfaz y diseños responsivos verificados en diversos tamaños de pantalla utilizando pruebas E2E con Playwright.
• Optimizaciones: Carga diferida (lazy loading) del pesado módulo de gráficos Recharts para mantener el paquete inicial de la página ligero y garantizar altas puntuaciones en Google PageSpeed.
• Calidad del Código: Compilación de TypeScript en modo estricto, alias de módulos basados en rutas y arquitecturas de diseño modulares.

Reflexiones

• Qué Haría Diferente: En una futura iteración, implementaría sincronización de datos de igual a igual (peer-to-peer) mediante WebRTC para permitir la sincronización entre dispositivos sin almacenar métricas personales en un servidor de terceros.
• Éxitos: Se entregó un panel de control con tema oscuro, hermoso y responsivo, utilizando Tailwind v4 y shadcn/ui, que se siente como una aplicación nativa.
• Lecciones: Profundicé mi comprensión sobre el manejo de patrones de estado persistente del navegador y estrategias de migración de datos del lado del cliente ante cambios en los esquemas de la aplicación.

Mis Contribuciones

• Desarrollo Full-Stack: Construí el cuestionario de incorporación, los cálculos para planes personalizados, el registro del seguimiento de calorías y los formularios de entrada de nutrición personalizados utilizando Next.js 15.
• Diseño UI/UX: Elaboré la interfaz de usuario con tema oscuro, las cuadrículas responsivas, las tarjetas interactivas del panel de control y las fluidas animaciones de Framer Motion.
• Arquitectura y Rendimiento: Diseñé la estrategia de claves del localStorage, envoltorios para la validación de datos y procesos de renderizado de gráficos optimizados.

Arquitectura del Proyecto

Esta aplicación sigue una arquitectura modular moderna y centrada en el cliente, construida en Next.js 15.

• Estructura en Capas: Separación lógica de seguimiento puro (hooks personalizados) respecto a los componentes de presentación visual.
• Módulos de Funcionalidades: Organizados de forma lógica por funcionalidades, tales como incorporación, entrenamientos, seguimiento de nutrición y gráficos de progreso.
• Gestión del Estado: Ganchos (hooks) de estado de React que se sincronizan de forma reactiva con la capa de almacenamiento del navegador mediante el uso de envoltorios personalizados.
• Refactorización y Mejoras: Se implementaron importaciones dinámicas para bibliotecas de gráficos pesadas con el fin de optimizar el rendimiento y las métricas fundamentales (Core Web Vitals).

Vista Previa de la Demostración

• Vista del Panel: Resumen de la ingesta diaria de calorías, lista de verificación del plan de entrenamiento activo y gráficos visuales del progreso semanal.
• Planificador de Entrenamientos: Creador de rutinas personalizadas y selector de programas.
• Rastreador de Calorías: Rastreador de macronutrientes con lista de alimentos añadidos de forma personalizada.

Nota de Alojamiento:
La aplicación en vivo está desplegada en Vercel y se encuentra disponible para acceder instantáneamente sin necesidad de registrarse en pfwfm.vercel.app.