CV Builder - Generador de Currículums

Frontend Developer · 2026 · 2 semanas · 1 person · 2 min read

Aplicación web para crear CVs con edición en tiempo real, múltiples plantillas y exportación a PDF

Overview

Desarrollo de una aplicación web interactiva que permite construir currículums de forma estructurada con preview en tiempo real y sistema de templates desacoplado.

Problem

Crear CVs personalizados suele ser un proceso manual y poco flexible. Las herramientas existentes limitan la personalización o no ofrecen una vista previa fiel al resultado final.

Constraints

  • Implementación completa en un plazo de 2 semanas
  • Mantener una arquitectura escalable desde el inicio
  • Exportación a PDF fiel al diseño visual (formato A4)
  • Sin backend, utilizando persistencia local

Approach

Se diseñó una arquitectura basada en un store central (Pinia) como única fuente de verdad, separando completamente editor, preview y templates. Se implementó un sistema de templates dinámico mediante un registry y un resolver para permitir escalabilidad.

Key Decisions

Uso de un store centralizado (Pinia) como Single Source of Truth

Reasoning:

Permite sincronización en tiempo real entre editor y preview sin acoplamiento directo entre componentes.

Alternatives considered:
  • Estado local por componente
  • Vuex

Sistema de templates desacoplado mediante registry

Reasoning:

Facilita la extensibilidad y permite agregar nuevos diseños sin modificar la lógica central.

Alternatives considered:
  • Templates hardcodeados
  • Condicionales en el renderizado

Exportación a PDF usando html2canvas + jsPDF

Reasoning:

Permite capturar el diseño visual real del preview y mantener fidelidad en la exportación.

Alternatives considered:
  • Generación de PDF desde HTML server-side
  • Librerías de generación de documentos

Tech Stack

  • Vue 3 (Composition API)
  • TypeScript
  • Pinia
  • Tailwind CSS
  • html2canvas
  • jsPDF
  • Vite

Result & Impact

  • 2 semanas (end-to-end)
    Tiempo de desarrollo
  • 3 (Default, Minimal, Modern)
    Templates implementados
  • Actualización en tiempo real sin recarga
    Renderización

Se logró una base sólida y escalable que permite extender funcionalidades como nuevos templates, exportación avanzada y futura integración con backend o IA.

Learnings

  • La separación estricta entre estado, UI y templates simplifica la escalabilidad
  • Un sistema de templates desacoplado permite iterar rápidamente en diseño
  • La exportación a PDF desde el frontend requiere ajustes finos para mantener fidelidad visual

Recursos del Proyecto

Technical Deep Dive

La arquitectura se centró en un flujo unidireccional:

Editor → Store (Pinia) → Preview → Template

El uso de un registry de templates junto a un resolver dinámico permitió desacoplar completamente la lógica de presentación, facilitando la incorporación de nuevos diseños sin afectar el resto del sistema.

Además, se priorizó que todos los componentes fueran presentacionales, delegando la lógica al store, lo que simplifica el mantenimiento y futuras extensiones.

All projects