Resumen del Proyecto

Desarrollé la landing page de DermaPlus como una experiencia web elegante y moderna para una clínica dermatológica premium. El sitio está diseñado como una SPA estática con navegación suave, hero de video de fondo, secciones de servicios animados y un formulario de contacto de alta conversión.

Arquitectura y Retos Técnicos

Para lograr una experiencia visual cuidada y de alto rendimiento, apliqué las siguientes decisiones técnicas:

• Next.js App Router + exportación estática: El proyecto se construye como un sitio SPA estático listo para desplegar en cualquier hosting sin servidor.
• Chakra UI personalizado: Creé una identidad visual consistente usando temas y componentes reutilizables, con soporte responsive desde móviles hasta escritorio.
• Animaciones avanzadas: Usé Framer Motion para dar vida al hero, a los carruseles de servicios y a las transiciones de las secciones.
• Interacción con usuario: Implementé un formulario de contacto validado con UX animada, y botones de llamada a la acción estratégicos para agendar citas.
• Dashboard de métricas internas: Incluí una ruta de panel (/dashboard) para mostrar un resumen de métricas y visualizaciones, reforzando la experiencia de producto más allá de la landing.

Resultados

• Diseño atractivo que transmite confianza y profesionalismo dermatológico.
• Experiencia fluida y accesible en dispositivos móviles y desktop.
• Arquitectura limpia basada en componentes y hooks para mantener el proyecto escalable.
• Entrega de una landing lista para presentar el servicio de la clínica y generar leads.

Detalles Adicionales

• Animaciones suaves con framer-motion.
• Formulario de lead con validación y estados de envío.
• Contenido modularizado en secciones: hero, servicios y contacto.
• Uso de video de fondo en el hero para mayor impacto visual.
• Sección de servicios con carousel y tarjetas destacadas.

Resumen del Proyecto

Desarrollé KrediPlus, una plataforma web moderna orientada a la gestión y simulación de créditos. El mayor diferenciador de este sistema es la integración de un chatbot potenciado por un sistema RAG (Retrieval-Augmented Generation). Esto permite que los clientes resuelvan dudas instantáneas interactuando en lenguaje natural con la documentación oficial de la empresa (PDFs y documentos Word procesados automáticamente).

Arquitectura y Retos Técnicos

Para garantizar la escalabilidad y mantenibilidad a largo plazo, implementé decisiones de diseño avanzadas en ambas capas del proyecto:

• Arquitectura Hexagonal: Construí la API del backend con FastAPI, separando la lógica de negocio mediante el patrón de puertos y adaptadores. Esto permitió que la generación de embeddings, la conexión a la base de datos PostgreSQL y las operaciones I/O fueran completamente asíncronas sin acoplar el código.
• Búsqueda Semántica Vectorial: Uno de los mayores retos fue lograr que el chatbot entendiera el contexto financiero. Lo resolví fragmentando los documentos en chunks, almacenándolos en PostgreSQL con la extensión pgvector, y realizando búsquedas de similitud coseno utilizando los modelos de OpenAI.
• Frontend Modular: Diseñé la interfaz del cliente y el panel administrativo utilizando React 19 y TypeScript bajo una arquitectura basada en “features” (funcionalidades). Implementé shadcn/ui para garantizar un sistema de diseño sólido y accesible, gestionando el estado global de los usuarios con Zustand.
• Gestión de Contexto Conversacional: Para mantener la coherencia del chatbot sin saturar la base de datos, implementé un mecanismo híbrido donde el historial se persiste temporalmente en el sessionStorage del cliente y se inyecta en el prompt de GPT en cada nueva petición al servidor.