Resumen del Proyecto
TuTrainer es una aplicación web desarrollada con Next.js que conecta usuarios con entrenadores personales. Permite filtrar entrenadores por especialidad, ver perfiles detallados y próximamente permitirá registrarse e interactuar.
Cuenta con backend propio desarrollado en Node.js y Express, base de datos MongoDB, y una interfaz moderna con Tailwind CSS. El objetivo es ofrecer una experiencia funcional y escalable que simula una app real de contratación de entrenadores.
El Desafío
Objetivos del Proyecto
- Permitir buscar entrenadores por especialidad de forma intuitiva
- Ofrecer perfiles limpios, visuales y bien estructurados
- Implementar filtros sin necesidad de registro
- Diseñar un sistema escalable con backend simulado
Restricciones y Limitaciones
- Desarrollo sin backend real en la fase MVP
- Funcionalidades limitadas al entorno del navegador
- No incluye sistema real de autenticación aún
- Diseño y funcionalidad equilibrados sin frameworks pesados
Problema Principal
¿Cómo crear una app atractiva y funcional que permita encontrar entrenadores sin necesidad de registro previo y con buena experiencia de usuario?
Mi Proceso
Investigación de mercado
Estudié aplicaciones similares como Entrenarme y Urban Sports Club para entender sus puntos fuertes y debilidades.
Wireframes y validación
Diseñé wireframes iniciales y validé la estructura con usuarios reales para simplificar la navegación.
Desarrollo UI
Implementé una interfaz moderna con tarjetas para entrenadores y filtros por especialidad usando HTML, CSS y JavaScript.
Simulación de backend
Los datos de entrenadores están simulados con JSON y gestionados en el frontend para representar cómo funcionaría con API real.
Solución Técnica
Tecnologías Usadas
Next.js
Framework React para desarrollo web full stack
Tailwind CSS
Estilos utilitarios para diseño rápido y responsivo
MongoDB
Base de datos NoSQL para almacenar usuarios y entrenadores
Node.js & Express
Servidor backend para lógica de negocio y API REST
Vercel
Despliegue rápido y CDN global con soporte para SSR
Características Técnicas Destacadas
Diseño Responsive
Implementación mobile-first con breakpoints optimizados. Uso de CSS Grid para layouts complejos y Flexbox para componentes.
Optimización de Performance
Imágenes optimizadas con lazy loading, CSS minificado y JavaScript optimizado para carga rápida.
Animaciones Sutiles
Transiciones CSS suaves y animaciones JavaScript para mejorar la experiencia sin afectar el rendimiento.
SEO Optimizado
HTML semántico, meta tags optimizados y estructura de datos para mejor indexación.
Resultados y Aprendizajes
Métricas de Rendimiento
Principales Aprendizajes
Full Stack con Next.js
Profundicé en rutas API, SSR y conexión con bases de datos desde Next.js.
Backend con Express
Desarrollé una API RESTful para gestionar entrenadores y usuarios desde el servidor.
Diseño centrado en el usuario
Diseñé una interfaz simple, rápida y clara, con filtros útiles y buen rendimiento móvil.
Escalabilidad y registro
La estructura actual permite fácilmente incorporar login, autenticación y dashboard personalizado.