CV Builder

Next.jsTypeScriptTailwind CSSZustandreact-pdf/rendererhtml2canvas-pro
CV Builder

Gambaran Umum

CV Builder adalah aplikasi client-side untuk membuat CV profesional langsung di browser. Mendukung berbagai template, pratinjau real-time, dan sistem riwayat yang solid — tanpa memerlukan backend.

Masalah

Kebanyakan CV builder mengunci fitur terpenting — mengunduh CV — di balik paywall. Kamu sudah capek-capek isi data, pilih template, atur semuanya sampai pas, lalu klik download — dan malah muncul prompt berlangganan.

CV Builder dibuat untuk menyelesaikan masalah itu: tanpa akun, tanpa paywall, tanpa langganan. Tinggal buat, preview, dan download.

Fitur Utama

  • Multi-template — ganti template tanpa kehilangan data form yang sudah diisi
  • Pratinjau langsung — preview A4 real-time yang dirender di dalam iframe via createPortal
  • Undo/redo — snapshot riwayat dengan debounce menggunakan Zustand untuk performa optimal
  • Opsi ekspor — ekspor ke PDF, gambar (PNG), HTML mandiri, dan JSON
  • Manajemen seksi — tambah, hapus, dan susun ulang seksi CV secara dinamis

Kontribusi Terbuka

Sistem template CV Builder terbuka untuk kontribusi. Developer maupun desainer bisa mengirimkan template baru lewat pull request di GitHub — membuat proyek ini terus berkembang tanpa bergantung pada satu pihak.

Highlight Teknis

Preview A4 berbasis iframe menggunakan createPortal untuk merender template CV di dalam iframe yang terisolasi, memastikan tidak ada style bleed antara UI editor dan output preview.

Undo/redo dengan debounce — snapshot riwayat dicatat melalui pola middleware Zustand yang di-debounce, mencegah entri berlebihan saat pengguna mengetik cepat, sekaligus menjaga riwayat tetap akurat.

Ganti template dengan data tetap terjaga — pergantian template tidak mereset data pengguna. State form dipisahkan dari layer template, memungkinkan perubahan visual tanpa kehilangan isi.

html2canvas-pro dipilih karena mendukung color space oklch yang digunakan Tailwind CSS v4, sehingga ekspor gambar akurat sesuai tampilan preview.

Ekspor ke HTML menghasilkan file HTML mandiri dengan style yang sudah di-inline — tidak butuh dependensi apapun untuk membuka atau berbagi CV hasil ekspor.