Virture CRM

Tipo de Proyecto

CRM Product

Mi Rol

Frontend Developer / UX

Contribución

UX, Arquitectura Frontend, QA, Seguridad & APIs NestJS

Línea de Tiempo

6 meses (Scrum) · Versión 1

portada de proyecto

Participé en la construcción del CRM Virture desde cero, desde la investigación de usuarios hasta su despliegue, creando una interfaz responsiva, accesible, segura y probada.

Cómo mejoré la experiencia y la arquitectura de Virture de principio a fin

CRM PRODUCT · Rol: Frontend Developer / UX · Scrum · 6 meses - Versión 1 · Equipo: cliente, diseño y desarrollo


Resumen

Participé en la construcción del CRM Virture desde cero, desde la investigación de usuarios hasta su despliegue. Mi trabajo se centró en crear una interfaz responsiva, accesible, segura y probada y en acelerar las entregas del equipo.

40%

Menos peticiones al servidor mediante caché en cliente

40+

Componentes documentados y probados, reutilizados en el proyecto

Producto y UX

  • Investigué competidores y los puntos de dolor de los usuarios para definir los módulos prioritarios.
  • Trabajé en ciclos de Scrum con juntas continuas con el cliente, diseño y desarrollo, iterando sobre módulos funcionales.
  • Validé los diseños y los casos de uso antes de implementarlos para evitar retrabajo.

Desarrollo frontend

  • Desarrollé módulos respetando la arquitectura y las convenciones del proyecto para mantener la consistencia del código.
  • Refiné los componentes hasta convertirlos en una versión estable y reutilizable, documentando sus variantes en Storybook.
  • Apliqué las WCAG 2.1 AA para que la aplicación pudiera usarse con el teclado y con lectores de pantalla.
  • Desarrollé una interfaz responsiva con enfoque mobile first, adaptada a móvil, tablet y escritorio.

Calidad

  • Creé pruebas unitarias y de integración con Vitest que cubren la accesibilidad, el almacenamiento, la respuesta al usuario, los tipos de datos y la seguridad, y con Cypress pruebas E2E.

Seguridad y rendimiento

  • Apliqué prácticas de OWASP Top 10, como sanitizar el HTML antes de guardarlo para prevenir la inyección de código (XSS).
  • Implementé el caché en el cliente para conservar los formularios no guardados y reducir en un 40% las solicitudes al servidor.

IA y automatización

  • Automaticé las respuestas a los usuarios mediante flujos en n8n conectados a una API de un modelo de lenguaje (LLM).
  • En entregas urgentes usé Cursor, Claude Code y v0 para prototipar componentes y validar la usabilidad antes de integrarlos. Esto redujo el tiempo de entrega y dio al equipo más margen para la planeación.

Backend (apoyo al equipo)

  • Cuando el equipo no tenía un perfil de backend, desarrollé y optimicé APIs con NestJS, Prisma y MongoDB.
  • Refactoricé APIs existentes aplicando principios SOLID, reduciendo el código y facilitando las pruebas unitarias, de integración y de rendimiento.

Stack

VuePiniaTypeScriptTailwindVitestStorybookn8nAPI LLMNestJSPrismaMongoDBWCAG 2.1 AAOWASP Top 10Cypress
Contáctame