Fittwiz: Descripción Técnica para Portfolio Fittwiz es un ecosistema de fitness premium impulsado por IA, diseñado para ofrecer entrenamiento, nutrición y seguimiento de progreso hiperpersonalizados. A diferencia de las aplicaciones genéricas, utiliza modelos de lenguaje avanzados (LLMs) para actuar como un "Arquitecto de Fitness" que se adapta al contexto específico de cada usuario. 🚀 Descripción General "Tu entrenador personal, nutricionista y coach de vida en tu bolsillo." Fittwiz es una PWA (Progressive Web App) que aprovecha la Inteligencia Artificial para transformar los datos del usuario en planes de entrenamiento accionables. Gestiona desde la generación de rutinas basadas en el equipo disponible hasta la identificación de macros a través de fotos de comida, manteniendo siempre una experiencia de usuario premium y orientada a dispositivos móviles. 🛠️ Stack Tecnológico Frontend Framework: React 19 (Vite) Lenguaje: TypeScript (Tipado estricto para mayor robustez) Estilos: Tailwind CSS v4 (Diseño moderno "utility-first") Enrutamiento: React Router v7 Iconos y UI: Lucide React, Framer Motion (Animaciones) Gestión de Estado: React Context + TanStack Query (React Query) PWA: vite-plugin-pwa para capacidades offline y experiencia de aplicación nativa. Backend e Infraestructura Plataforma: Firebase (Cloud Functions V2) Base de Datos: Firestore (NoSQL, datos en tiempo real) Autenticación: Firebase Auth Almacenamiento: Firebase Storage (Imágenes de usuarios y fotos de comida) Serverless: Node.js 22 en Google Cloud Functions. Inteligencia Artificial Motor Principal: Google Gemini (Gemini 3 y Gemini 2.5) Prompts Basados en Personas: Roles personalizados que incluyen "Entrenador de Élite", "Consultor Biomédico" y "Científico Analítico". Validación: Esquemas Zod para respuestas de IA estrictamente tipadas, garantizando la integridad de los datos al 100%. 🧠 Generación de Rutinas (El "Ingrediente Secreto") Fittwiz utiliza una arquitectura de validación en múltiples etapas para garantizar que las rutinas sean realistas y seguras: Filtrado Inteligente de Equipo: El sistema recupera el catálogo completo de ejercicios de Firestore y realiza una verificación estricta contra el inventario del usuario antes de llamar a la IA. Inyección de Catálogo Validado: Se inyecta un catálogo "veteado" en el prompt de la IA, obligando al modelo a seleccionar exclusivamente ejercicios que el usuario puede realizar con su equipo. Motor de Auto-Corrección: Tras la generación, un procesador valida cada ID de ejercicio. Si la IA "alucina" un ejercicio inexistente o sugiere uno sin el equipo adecuado, el sistema lo sustituye automáticamente por una alternativa válida para el mismo grupo muscular. Restricciones Adaptativas: Ajusta automáticamente el volumen (series/reps) según el tiempo disponible del usuario (ej. 30 min vs 60 min) y filtra ejercicios que puedan agravar lesiones especificadas. 🔌 Ecosistema de APIs e Integraciones Google Gemini API: Impulsa todas las funciones inteligentes utilizando modelos de vanguardia como Gemini 3 Flash y Gemini 2.5 Flash (Rutinas, Nutrición, Coaching Semanal). Stripe API: Gestión de suscripciones y pagos seguros (Planes Free y Pro). PostHog: Análisis avanzado del comportamiento del usuario y seguimiento de eventos. Resend: Sistema de correo transaccional para notificaciones. Strava API: Generación automática de resúmenes atractivos para compartir en redes sociales. Web APIs: Geolocalización, Cámara (escaneo de nutrición) y Share API. ✨ Características Principales AI Trainer: Rutinas hiperpersonalizadas con cumplimiento estricto del catálogo. Smart Nutrition: Identificación de macros mediante imágenes e historial de texto. Progress Analytics: Visualización interactiva de tendencias de fuerza y consistencia. Weekly Coach: Análisis recurrente con personalidades configurables (Motivador, Sargento, Científico). Shoe Tracker: Gestión de equipamiento para prevenir lesiones según el desgaste. 📝 Extracto para Portfolio (Listo para usar) Fittwiz | Fundador y Desarrollador Principal Ecosistema Fitness Impulsado por IA (PWA) Desarrollé una plataforma fitness premium que utiliza la tecnología de vanguardia de Google Gemini (Gemini 3 / 2.5) para actuar como un Arquitecto de Fitness Personalizado. Logros clave: Diseñé una Arquitectura de IA con Auto-Corrección que elimina alucinaciones del modelo mediante la validación y mapeo de rutinas contra un catálogo de ejercicios filtrado estrictamente por equipo. Construí un Backend Serverless robusto con Firebase V2 y TypeScript, gestionando sincronización en tiempo real y procesamiento de cuotas de IA. Implementé un Escáner de Nutrición IA capaz de identificar macronutrientes a partir de fotografías de comida mediante procesamiento multimodal de LLMs. Desarrollé un Frontend de alto rendimiento con React 19 y Tailwind CSS v4, logrando una UX premium con tiempos de carga mínimos y funcionalidad PWA completa.

E-Commerce & Portafolio Interactivo – Elena Damota Art Plataforma web premium de e-commerce y portafolio interactivo diseñada a medida para la artista Elena Damota (Oviedo, España). El sistema combina una experiencia visual inmersiva orientada al arte con una infraestructura robusta y segura para la venta de obras originales, reproducciones firmadas (prints) y gestión de pedidos personalizados. --- Arquitectura y Tecnologías Clave Frontend y SSR (Next.js 16 & React) Cómo y dónde se usó: Implementación de rutas dinámicas y renderizado híbrido para optimizar el SEO de las galerías de arte y asegurar tiempos de carga ultra veloces en la visualización de obras de alta resolución. Uso intensivo de React Server Components* (RSC) para la recuperación eficiente de datos directamente en el servidor. Estilos y Sistema de Diseño (Tailwind CSS v4) Cómo y dónde se usó: Configuración CSS-first* a través de @theme (sin archivo de configuración JS externo) para definir una paleta cromática minimalista y elegante (tonos crema, óxido, carbón y grafito) y tipografías personalizadas que complementan la estética artística sin restar protagonismo a las obras. Base de Datos y Backend-as-a-Service (Supabase & Postgres) Cómo y dónde se usó: Gestión de la base de datos relacional para el manejo de usuarios, perfiles, productos, pedidos, valoraciones y variantes de tamaño. Implementación de políticas de seguridad a nivel de fila (Row Level Security - RLS) y autenticación. En el servidor, se utiliza el cliente de administración con bypass de RLS para flujos específicos de back-office*. Procesamiento de Pagos (Stripe API & Webhooks) Cómo y dónde se usó: Integración nativa de Stripe Checkout Sessions para un flujo de pago seguro e internacional, optimizado tanto para usuarios registrados como para compras rápidas de invitados (Guest Checkout). Procesamiento asíncrono del estado de los pedidos mediante un manejador de Webhooks* dedicado. Control de Acceso (Proxy Handler Chain Customizado) Cómo y dónde se usó: Creación de una cadena de middlewares en el servidor (proxy.ts) para interceptar las peticiones y gestionar de forma limpia la seguridad del panel de administración y las secciones privadas de perfil de usuario. Estado del Carrito (Zustand con Persistencia) Cómo y dónde se usó: Gestión del estado global del carrito de compras sincronizado en tiempo real con localStorage, resolviendo la lógica de matching* por variante de tamaño y número de edición para asegurar la consistencia de productos exclusivos. Validación y Tipado Estricto (TypeScript & Zod) Cómo y dónde se usó: Esquemas de Zod para la validación rigurosa de datos en los formularios de pedidos personalizados y deserialización segura de las filas de la base de datos a tipos estáticos de la aplicación. Estrategia de Testing (Vitest, MSW & Playwright) Cómo y dónde se usó: Cobertura de tests unitarios y de integración mediante Vitest con simulación estricta de APIs externas (Supabase y Stripe) usando Mock Service Worker (MSW). Pruebas de extremo a extremo (E2E) automatizadas con Playwright para validar completamente los flujos críticos de checkout* y navegación. --- Este proyecto destaca mi enfoque para diseñar arquitecturas de comercio electrónico de alto rendimiento, asegurando una estética impecable junto con un flujo de datos seguro, tipado y completamente testeado desde el servidor hasta el cliente.

Kidpoints Kidpoints es una plataforma web integral diseñada para transformar las rutinas y responsabilidades diarias de los niños en una experiencia motivadora mediante dinámicas de gamificación. Muchas veces, la gestión de hábitos en el hogar genera fricciones; este proyecto nace con el objetivo de cambiar esa dinámica, utilizando el refuerzo positivo como puente entre padres e hijos. El Reto y la Solución La gestión de tareas diarias (como hacer la cama, estudiar o recoger los juguetes) suele carecer de un seguimiento claro o de un incentivo inmediato que los niños puedan asimilar fácilmente. Kidpoints resuelve este problema ofreciendo un ecosistema digital conectado: Para los padres: Un panel de control intuitivo desde el cual definir retos, asignar valores en puntos a cada tarea y supervisar el progreso general de forma sencilla. Para los niños: Una interfaz visualmente activa y amigable donde pueden consultar sus objetivos diarios, marcar sus logros y ver cómo acumulan puntos para alcanzar recompensas previamente acordadas en familia. El propósito principal es fomentar la autonomía del menor y la comunicación positiva, eliminando la ambigüedad y permitiendo que la familia se enfoque en celebrar los logros juntos. --- Arquitectura y Desarrollo El desarrollo de Kidpoints es el resultado de un flujo de trabajo moderno, optimizado para lograr un despliegue ágil, seguro y escalable. He diseñado e implementado la solución completa combinando tecnologías modernas de desarrollo web con infraestructura en la nube. Stack Tecnológico Frontend: Construido con React y TypeScript, garantizando un código robusto, mantenible y con un tipado estricto que previene errores en producción. Estilos: Interfaz diseñada con Tailwind CSS, priorizando una experiencia de usuario (UX) limpia, fluida y completamente adaptativa (Mobile-First*) para su uso cómodo en tablets y móviles. Backend y Datos: Integración con Firebase para la persistencia de datos y la gestión de la lógica en tiempo real. Flujo de Trabajo e Infraestructura Desarrollo asistido por IA: Para optimizar los tiempos de desarrollo y la implementación de la lógica del proyecto, integré herramientas avanzadas de AI Studio, acelerando el ciclo de iteración del MVP. Despliegue y Cloud: La aplicación está desplegada en Google Cloud Platform utilizando Cloud Run, lo que asegura una infraestructura serverless* eficiente, ágil y de alta disponibilidad. --- Este proyecto refleja mi capacidad para gestionar el ciclo completo de una aplicación web, desde la conceptualización del producto y el diseño de la interfaz, hasta la arquitectura cloud y su puesta en producción.

Rock Runners es una aplicación web activa diseñada para la comunidad de corredores, ofreciendo contenido, gestión de competiciones y recursos especializados. Al ser un proyecto público, el enfoque se centra en el rendimiento, la accesibilidad y una experiencia de usuario (UX) pulida. Mis Contribuciones Clave: Desarrollo de UI Moderno (Blog): Diseñé e implementé la arquitectura visual del Blog utilizando React 19 y Tailwind CSS. Creé componentes modulares como las tarjetas de artículos (PostCard.tsx), asegurando un diseño responsivo y atractivo para aumentar la retención de los lectores. Integración Backend & API: Desarrollé los endpoints necesarios para conectar el frontend con Supabase, gestionando la obtención eficiente de datos tanto para las entradas del blog como para el módulo de competiciones, garantizando tiempos de carga rápidos en producción. Gestión de Contenido y Administración: Colaboré en el panel de administración implementando la Tabla de Competiciones (CompetitionTable.tsx). Para ello, reutilicé componentes UI existentes, manteniendo la consistencia visual del sistema de diseño y optimizando el tiempo de desarrollo. Full Stack Feature (En desarrollo): Actualmente lidero la creación de la sección de "Zapatillas". Estoy a cargo del ciclo completo (End-to-End): desde el diseño de la interfaz de usuario hasta la implementación del CRUD en el backend para gestionar la base de datos de calzado.

Codepply es una plataforma diseñada para conectar a desarrolladores junior con reclutadores y empresas, facilitando la inserción laboral del talento joven. El proyecto fue desarrollado bajo metodología Scrum por un equipo de cuatro personas. Mi rol principal fue Full Stack Developer, liderando la implementación de características críticas tanto en el frontend como en el backend. En el Frontend, fui responsable de la arquitectura de la interfaz para la gestión de reclutadores, traduciendo diseños de alta fidelidad (Figma/Lovable) a código React modular y escalable, además de co-desarrollar el sistema de chat en tiempo real. En el Backend, diseñé la lógica de negocio para la gestión de ofertas (CRUD) y reestructuré la gestión de seguridad mediante roles y contextos, asegurando que la aplicación fuera dinámica y segura según el tipo de usuario. Finalmente, gestioné el ciclo de DevOps, desplegando el frontend en Netlify y el backend en Koyeb. Profundización Técnica (Para la sección "Detalles técnicos" o "Logros clave") Aquí detallo mis contribuciones específicas y las decisiones técnicas tomadas: Frontend: Arquitectura UI y Comunicación en Tiempo Real Traducción de Diseño a Código (Pixel-Perfect): Me encargué de la sección de Recruiters, transformando los diseños de Figma en componentes de React reutilizables y responsivos. Implementé la gestión de ofertas visual, asegurando una experiencia de usuario fluida para que las empresas pudieran crear y administrar vacantes. Sistema de Chat: Colaboré en la implementación del módulo de mensajería instantánea. Utilicé socket.io-client para establecer la conexión bidireccional con el servidor, permitiendo una comunicación fluida entre candidatos y reclutadores. Estructuré componentes como ChatScreen.jsx para manejar la visualización de mensajes y la lista de usuarios activos. Gestión de Estado Global (Context API): Optimicé el authContext.jsx para manejar no solo la autenticación, sino la persistencia del rol del usuario a través de toda la sesión. Esto permitió renderizado condicional eficiente: la interfaz cambia dinámicamente mostrando herramientas de edición para reclutadores o vistas de aplicación para desarrolladores sin necesidad de recargar la página. Backend: Lógica de Negocio y Seguridad Gestión de Ofertas (CRUD Avanzado): Desarrollé el offerController.js para manejar el ciclo de vida completo de las ofertas de empleo. Implementé endpoints robustos para crear, leer, actualizar y eliminar ofertas, asegurando que solo los reclutadores propietarios de una oferta pudieran modificarla. Arquitectura Basada en Roles (RBAC): Mi decisión clave fue integrar la validación de roles profundamente en la arquitectura. No solo a nivel de rutas protegidas, sino inyectando el contexto del usuario en cada petición. Esto permite que el backend discrimine automáticamente qué datos servir, optimizando la seguridad y el rendimiento al evitar consultas innecesarias a la base de datos para usuarios no autorizados. Infraestructura de WebSockets: Configuré el servidor de socket.io en el backend (utils/socket.js), gestionando eventos de conexión (connection) y desconexión para mantener el estado real de los usuarios en línea y asegurar la entrega inmediata de mensajes. DevOps y Despliegue Asumí la responsabilidad de llevar el proyecto a producción, configurando el pipeline de despliegue continuo. Frontend: Desplegado en Netlify, configurando redirecciones (_redirects) para el manejo de rutas de SPA (Single Page Application). Backend: Desplegado en Koyeb, asegurando variables de entorno seguras y escalabilidad automática.

Evolucción de Portafolio: De API Externa a Arquitectura Agéntica Full-Stack Este proyecto es el resultado de un proceso de modernización profunda. Originalmente, el portafolio dependía del backend de Codepply, utilizando su API y plataforma propietaria para la gestión y subida de contenidos. Si bien era funcional, presentaba limitaciones en cuanto a flexibilidad, personalización de datos y control total sobre el rendimiento SEO. 🔄 El Reto de la Migración El principal objetivo fue internalizar toda la lógica del negocio. Realicé una migración completa hacia Next.js 16 y Supabase, transformando una herramienta de terceros en una solución Full-Stack propietaria. En este proceso, exploré nuevas fronteras de desarrollo: Integración MCP: Conecté el Model Context Protocol de Supabase para permitir que agentes de IA pudieran interactuar directamente con el esquema de la base de datos de manera segura. Desarrollo Agéntico: Experimenté con Antigravity y archivos de configuración específicos para agentes, optimizando el ciclo de vida del desarrollo y facilitando el mantenimiento automatizado. 🎨 Ingeniería Front-End y Experiencia de Usuario El Front-End ha sido rediseñado desde cero priorizando la escalabilidad y un "feeling" premium: Atomic Design: El proyecto sigue la metodología de diseño atómico, organizando la interfaz en Atoms, Molecules y Organisms. Esto garantiza que cada componente (desde un botón hasta el carrusel de imágenes) sea reutilizable y fácil de testear. Rendimiento con Next.js: Uso intensivo de React Server Components para minimizar el bundle enviado al cliente, resultando en tiempos de carga casi instantáneos. Interactividad Avanzada: Implementé un Carrusel personalizado y un sistema de Reveal-on-Scroll para guiar la atención del usuario sin comprometer la accesibilidad. CMS Privado: Desarrollé un panel administrativo a medida que incluye un Selector de Tecnologías inteligente (basado en un diccionario técnico) y gestión avanzada de subida múltiple de archivos a Supabase Storage. Ficha Técnica Mejorada Legacy Stack: Codepply API (Backend-as-a-Service externo). New Stack: Next.js 16 (App Router), React 19, Supabase (PostgreSQL + RLS), TypeScript. Frontend Core: Atomic Design, Tailwind CSS, DaisyUI, Next/Image Optimization. Agentic Dev: Supabase MCP, Antigravity, Custom Agent Configs.

Flowcare es una solución SaaS diseñada para digitalizar la interacción entre clínicas, doctores y pacientes. Desarrollado en un sprint intensivo de 4 semanas bajo metodología Scrum, el sistema facilita la gestión de citas y teleconsultas en tiempo real. Mis Contribuciones Clave: Desarrollo Backend (Lógica de Negocio): Lideré la arquitectura del módulo de gestión de especialistas (doctors.controller.js). Implementé un CRUD robusto utilizando Node.js y Prisma ORM, asegurando la integridad de datos y la seguridad mediante el hasheo de credenciales con bcrypt para el acceso de los doctores. Implementación Frontend & AI Workflow: Desarrollé la interfaz de usuario para la administración de doctores utilizando Next.js y Tailwind CSS. Integré GitHub Copilot en mi flujo de trabajo para acelerar la maquetación y la lógica de los componentes de React, optimizando los tiempos de entrega sin sacrificar la calidad del código. DevOps & Despliegue (CI/CD): Asumí la responsabilidad total de llevar el proyecto a producción, configurando una arquitectura desacoplada: Frontend: Desplegado en Vercel para aprovechar la optimización de edge networks de Next.js. Backend & Base de Datos: Orquestación del servidor y la base de datos PostgreSQL en Koyeb, asegurando una comunicación fluida y latencia mínima.

Tipo: Herramienta Web (SPA) | Stack: HTML5, CSS3, JavaScript (Vanilla) Sobre el Proyecto: Desarrollé una aplicación web interactiva diseñada para estimar el valor de mercado de ordenadores de sobremesa basándose en sus especificaciones técnicas. El objetivo era crear una herramienta intuitiva que permitiera a los usuarios obtener una valoración instantánea seleccionando sus componentes, automatizando un proceso que normalmente requiere investigación manual. Aspectos Técnicos Destacados: Lógica de Algoritmos Compleja (JavaScript): Implementé un motor de cálculo robusto en main.js que evalúa múltiples variables interdependientes. El sistema no solo suma componentes, sino que aplica lógica condicional basada en generaciones de procesadores (e.g., Intel Core de 11ª gen vs anteriores) y series de tarjetas gráficas (GTX vs RTX), asignando valores depreciados o incrementales según la relevancia del hardware en el mercado actual. Manipulación Dinámica del DOM: La interfaz responde en tiempo real a las entradas del usuario sin necesidad de recargar la página. Utilicé Event Listeners para capturar cambios en formularios selectores (CPU, RAM, GPU, Almacenamiento) y actualizar el precio final instantáneamente, mejorando la experiencia de usuario (UX). Diseño UI/UX Personalizado: Maquetación limpia y responsiva utilizando CSS3 y variables CSS (:root) para mantener la consistencia visual. Integré tipografías personalizadas (VAG Rounded) para alinear la estética con la identidad visual del sector de compra-venta de tecnología.