// Sitio Web de Fitness Personal

Sitio Web de Fitness Personal

App Web de Fitness / Next.js / Planificación de Entrenamientos / Seguimiento de Calorías

Resumen rápido: Una plataforma de fitness personal gratuita y sin necesidad de cuenta construida con Next.js: planes de entrenamiento personalizados, objetivos de calorías, seguimiento de progreso y registro de nutrición, todo almacenado localmente sin necesidad de registro.

Sitio en vivo: pfwfm.vercel.app

Características

• Planes de entrenamiento personalizados adaptados al perfil y objetivos del usuario
• Seguimiento de calorías con alimentos guardados y registros diarios
• Registro de nutrición con desglose de macronutrientes
• Seguimiento de progreso con gráficos visuales (Recharts)
• Flujo de incorporación que crea un perfil y recomienda programas
• Constructor de entrenamientos personalizados para rutinas a medida
• Exportación y uso compartido del perfil completo
• No requiere cuenta: todos los datos se almacenan en localStorage
• Gratis, sin suscripciones, sin anuncios

Mis Contribuciones (Rol y Responsabilidades)

Desarrollo Full-Stack:

• Construí toda la aplicación utilizando Next.js 15 App Router con modo estricto de TypeScript
• Implementé el sistema de planificación de entrenamientos con programas predefinidos y rutinas personalizadas
• Desarrollé el seguimiento de calorías y nutrición con persistencia en almacenamiento local
• Creé el flujo de incorporación con configuración de perfil paso a paso
• Construí el panel de visualización de progreso con Recharts

Diseño UI/UX:

• Diseñé un diseño responsivo y mobile-first con componentes shadcn/ui
• Implementé soporte para modo oscuro con next-themes
• Creé una página de aterrizaje animada y transiciones suaves con Framer Motion
• Desarrollé un sistema de componentes reutilizables para funciones de seguimiento de fitness

Arquitectura:

• Capa de datos basada en localStorage (8 claves pfw_) - no requiere backend
• Estructura de componentes modular con directorios específicos por función
• Gestión de estado segura con tipos mediante el modo estricto de TypeScript
• Desarrollo basado en especificaciones con detalles de funciones exhaustivos

Desafíos Enfrentados

• Arquitectura sin backend: Gestionar datos relacionales complejos (planes de entrenamiento, registros, nutrición) enteramente en localStorage requirió un diseño cuidadoso de claves y estrategias de migración de datos
• Consistencia entre funciones: Asegurar que los planes de entrenamiento, el seguimiento de calorías y los gráficos de progreso hicieran referencia correctamente a los mismos datos de perfil del usuario
• Seguridad de tipos a escala: Mantener feliz el modo estricto de TypeScript en un código base creciente con límites de serialización de localStorage
• Diseño responsivo mobile-first: Los formularios y gráficos de seguimiento de fitness necesitaban funcionar perfectamente tanto en teléfonos como en escritorio

Arquitectura del Proyecto

• Framework: Next.js 15 App Router con TypeScript 5.x (strict: true)
• UI: shadcn/ui, Tailwind CSS v4, Framer Motion, iconos Lucide
• Gráficos: Recharts v3 (carga diferida para rendimiento)
• Capa de Datos: localStorage del navegador (8 claves: perfil, programa activo, registros de entrenamiento, progreso, nutrición, registros de calorías, alimentos guardados, entrenamientos personalizados)
• Hooks: usehooks-ts (useLocalStorage), hooks personalizados
• Pruebas: Playwright (E2E), Vitest (unitarias)
• Despliegue: Vercel

Vista Previa de la Demo

• Sitio en Vivo: pfwfm.vercel.app
• Vistas de Plataforma: Web (responsivo, mobile-first)
• Funcionalidad Mostrada:
  • Página de aterrizaje con sección principal
  • Flujo de incorporación para configurar perfil y objetivos
  • Panel de control con resumen de entrenamiento, nutrición y progreso
  • Página de entrenamiento con programas predefinidos y rutinas personalizadas
  • Seguimiento de calorías y nutrición con alimentos guardados
  • Gráficos de progreso y estadísticas

Recursos de Desarrollo

• Guías/Docs:
  • Documentación de Next.js, shadcn/ui, Tailwind CSS v4, Framer Motion
  • CLAUDE.md en el repositorio para pautas de desarrollo

Si necesita más detalles o desea ver el código base, póngase en contacto con el autor directamente.