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. 2. 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.

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.

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: Proyecto Experimental / Uso Personal | Stack: React, Firebase, Google Gemini API (3 Flash) Sobre el Proyecto: MyFitt nació como un experimento para explorar los límites del desarrollo asistido por Inteligencia Artificial. Lo que comenzó como una visualización de rutinas en el entorno de Gemini Canvas, evolucionó hacia una PWA (Progressive Web App) completa que utilizo diariamente para mis entrenamientos. Metodología y Desarrollo: Este proyecto se diferencia por su enfoque "AI-Driven": Prototipado Rápido: La base del código y la lógica de interfaz fueron generadas y portadas utilizando herramientas de IA (Gemini/Antigravity), permitiéndome centrarme en la funcionalidad y la experiencia de usuario en lugar del "boilerplate". Integración de APIs: Mi intervención técnica principal fue la "conexión de cables": configurar la arquitectura en la nube con Firebase (Auth y Firestore) para la persistencia de datos y conectar la API de Gemini 1.5 Flash. Funcionalidades IA: Implementé características avanzadas potenciadas por LLMs: AI Coach: Un asistente virtual que responde dudas sobre ejercicios. Smart Nutrition: Un analizador de comidas y calorías asistido por IA.

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.