Sistema de diseño
Spartan Vue
El sistema de diseño de Placetopay: componentes Vue sobre TailwindCSS v4, documentados y versionados, usados en producción.
Hola, soy Juan David Zea
Desarrollador de softwareIngeniero de Sistemas
Ingeniero de Sistemas con 6 años construyendo interfaces. Hoy desarrollo el checkout de una pasarela de pagos y el sistema de diseño de la empresa, y construyo con agentes de IA.
Copacabana, Antioquia, Colombia Versión para imprimir
De fondo, 80 de los 1.017 iconos de Iconsax Vue, una de mis librerías.
En cifras
- años de experiencia
- 6
- commits en Spartan Vue, 774 míos
- 1.204
- versiones de Spartan Vue publicadas en npm
- 296
- descargas de mis librerías en el último año
- 92.892
Datos de npm y GitHub, actualizados al publicar.
01
Experiencia
- hoy 5 años
Frontend Senior Engineer Placetopay — Evertec Inc.
Desarrollo y mantengo la página de checkout de la pasarela de pagos de Placetopay, que procesa transacciones en Latinoamérica.
- Creé Spartan Vue, el sistema de diseño de la empresa, y soy su mayor contribuidor.
- Creé las librerías open source de iconos, banderas y lightbox que usan los productos en producción.
- He dictado cursos internos de programación al equipo.
- Vue
- TypeScript
- TailwindCSS
- Nuxt
- PHP
- Laravel
- Freelance
Desarrollador freelance
Software a medida para una mueblería: ventas, inventario, facturación y reportes.
- JavaScript
- Node
- SQL
Formación
Ingeniero de Sistemas · Universidad de Antioquia
02
Open source
Librerías que creé y mantengo, en producción y en npm. Las que puedes tocar, están vivas aquí abajo.
Iconos
Iconsax Vue
Más de mil iconos de Iconsax como componentes Vue, en seis estilos, que solo pesan lo que importas.
Prueba «card», «code» o «shield»
Banderas
Flagicons Vue
Las banderas de los países como componentes Vue, en tres tamaños.
SDK
Lightbox SDK
Abre sitios en un iframe con forma de modal y se comunica con ellos, con estilos y comportamiento configurables.
- TypeScript
Servidor MCP para agentes de IA
PTP Studio MCP
Le da a un agente de IA (Claude Code, OpenCode…) acceso a PTP Studio, mi herramienta de pruebas de pagos: crea, consulta y cancela sesiones de pago y opera la app en vivo, sin que las credenciales lleguen nunca al modelo.
- Node
- MCP
- WebSocket
API
SimpleMoneyConverter
API de conversión de monedas con tasas históricas y lotes de hasta 100 peticiones.
- TypeScript
- Node
- Jest
03
Con agentes de IA
Trabajo con Claude Code y construyo herramientas para que los agentes hagan trabajo real. Creo en SOLID, en TDD y en usar la IA con criterio.
Herramienta propia
PTP Studio
Un cliente web que creé para probar las APIs de pago de Placetopay: más de 36 endpoints de Webcheckout, Gateway y Core desde una sola interfaz, con entornos, sitios, historial y cadenas de peticiones que se pasan datos entre pasos.
- Una extensión de Chrome responde las peticiones del checkout con respuestas simuladas, para reproducir cualquier comportamiento del frontend sin tocar el backend.
- Su servidor MCP deja que un agente de IA la opere en vivo.
- Los datos viven en el navegador, sin servidor; en español e inglés.
- Nuxt 4
- Vue 3
- Nuxt UI 4
- TailwindCSS 4
- Cloudflare Workers
Servidor MCP para agentes de IA
Un servidor MCP para pagos
Le da a un agente de IA (Claude Code, OpenCode…) acceso a PTP Studio, mi herramienta de pruebas de pagos: crea, consulta y cancela sesiones de pago y opera la app en vivo, sin que las credenciales lleguen nunca al modelo.
Las credenciales nunca llegan al modelo: la firma ocurre fuera de él.
Instalarlo en Claude Code
claude mcp add ptp-studio -- npx -y @juanzea/ptp-studio-mcp @juanzea/ptp-studio-mcp · v0.7.1 · 2.315 descargas/año
- Agente de IA Claude Code · OpenCode
- MCP · stdio
- ptp-studio-mcp mi servidor · HTTP → checkout que firma
- WebSocket local
- PTP Studio la app, en tu navegador
Herramientas que le da al agente
Checkout
- create_session_for_site
- query_session_for_site
- cancel_session_for_site
- check_auth_for_site
Estado
- list_sessions
- list_sites
- list_environments
App
- navigate
- prefill_endpoint
- describe_endpoint
- create_mock
04
Con qué trabajo
- Frontend
- Vue
- Nuxt
- Svelte
- React
- Astro
- TypeScript
- JavaScript
- TailwindCSS
- CSS
- HTML
- Backend y datos
- Node
- Laravel
- PHP
- SQL
- Drizzle
- NeonDB
- Supabase
- IA
- Claude Code
- Claude
- MCP
- Gemini
- OpenAI
- Infraestructura
- Cloudflare
- Vercel
- Git
- pnpm
- Método
- SOLID
- TDD
- Vitest
- POO
- SCRUM
- Patrones de diseño
05
¿Hablamos?
Busco un equipo donde construir producto con buen oficio. Escríbeme por correo o por LinkedIn.