Dokumentasi

Cara Kerja

1. Kamu mengisi form CV di browser. Data disimpan di React State yang merupakan memori sementara browser.
2. EZCV secara otomatis menyimpan data kamu ke Local Storage browser setiap kali ada perubahan. Data ini akan tetap ada meskipun kamu menutup browser.
3. Saat kamu menekan "Download PDF", library @react-pdf/renderer membuat file PDF langsung di browser kamu tanpa mengirim data ke server.
4. File PDF di-download langsung ke perangkat kamu. Tidak ada proses yang melibatkan server eksternal.
5. Fitur "Save" mengekspor data sebagai file JSON ke perangkat kamu. Fitur "Load" membaca file JSON dari perangkat kamu untuk memulihkan data.

Alur Pemrosesan Data

Berikut adalah alur lengkap bagaimana data CV kamu diproses dari awal hingga menjadi file PDF:

1. Input Kamu mengetik data di form. Data masuk ke React State (memori browser).
2. Autosave Setiap perubahan otomatis disimpan ke Local Storage browser agar tidak hilang saat tab ditutup.
3. Sanitasi (Mode ATS) Jika kamu memilih mode ATS-Friendly, data teks akan dibersihkan dari karakter khusus yang tidak kompatibel dengan mesin ATS.
4. Rendering PDF Data yang sudah bersih di-render menjadi komponen React PDF menggunakan library @react-pdf/renderer.
5. Blob Generation Library mengkonversi komponen React menjadi binary PDF (Blob) langsung di memori browser.
6. Download Browser membuat URL lokal (blob://) dari Blob tersebut dan memulai download ke perangkat kamu.

Seluruh proses di atas terjadi di dalam browser. Tidak ada satu pun langkah yang melibatkan koneksi ke server eksternal.

Arsitektur Aplikasi

EZCV dibangun sebagai aplikasi statis tanpa backend. Berikut komponen utamanya:

• Framework Next.js 15 (Static Export)
• PDF Engine @react-pdf/renderer (client-side rendering)
• PDF Preview react-pdf (canvas-based rendering)
• State Management React Context (in-memory)
• Persistensi Local Storage (autosave)
• Database Tidak ada
• Backend API Tidak ada

Mode ATS-Friendly PDF

EZCV menyediakan dua mode export PDF:

• Modern PDF menggunakan desain visual dengan layout modern dan font kustom.
• ATS-Friendly PDF menggunakan format yang dioptimasi untuk Applicant Tracking System dengan font Helvetica bawaan, layout single-column, dan tanpa elemen grafis.

Mode ATS secara otomatis melakukan sanitasi teks sebelum membuat PDF. Proses sanitasi mengganti karakter khusus seperti em-dash, en-dash, curly quotes, dan non-breaking spaces dengan karakter standar ASCII agar mudah dibaca oleh mesin ATS.

Struktur section pada mode ATS adalah Summary, Work Experience, Education, Technical Skills, Soft Skills, dan Certifications. Section Projects dan Languages tidak ditampilkan pada mode ini karena umumnya tidak diperlukan oleh sistem ATS.

Kode Sanitasi Data

Berikut adalah kode yang memproses teks CV kamu sebelum diekspor ke PDF ATS. Fungsi ini berjalan sepenuhnya di browser dan tidak mengirim data ke manapun.

// sanitizeText - berjalan 100% di browser
export function sanitizeText(str) {
  if (!str || typeof str !== "string") return "";
  let result = str;

  // Mengganti em-dash, en-dash, non-breaking hyphen
  // menjadi hyphen biasa (-)
  result = result.replace(/[\u2014\u2013\u2011]/g, "-");

  // Mengganti curly single quotes menjadi straight quote
  result = result.replace(/[\u2018\u2019]/g, "'");

  // Mengganti curly double quotes menjadi straight quote
  result = result.replace(/[\u201C\u201D]/g, '"');

  // Mengganti non-breaking space menjadi spasi biasa
  result = result.replace(/\u00A0/g, " ");

  // Menghapus spasi yang muncul sebelum koma atau titik
  result = result.replace(/ +([,.])/g, "$1");

  // Menggabungkan spasi berlebih menjadi satu spasi
  result = result.replace(/ {2,}/g, " ");

  return result;
}

// sanitizeResumeData - memproses seluruh objek resume
// secara rekursif tanpa mengubah data asli
export function sanitizeResumeData(data) {
  if (data === null || data === undefined) return data;
  if (typeof data === "string") return sanitizeText(data);
  if (Array.isArray(data)) {
    return data.map((item) => sanitizeResumeData(item));
  }
  if (typeof data === "object") {
    const result = {};
    for (const key of Object.keys(data)) {
      result[key] = sanitizeResumeData(data[key]);
    }
    return result;
  }
  return data;
}

Kode Pembuatan PDF

PDF dibuat menggunakan BlobProvider dari @react-pdf/renderer. Seluruh proses terjadi di browser tanpa koneksi jaringan.

// PDFPreview.jsx - pembuatan PDF di sisi client

import { BlobProvider } from "@react-pdf/renderer";
import { sanitizeResumeData } from "../../utils/sanitizeResumeData";
import ATSResumeDocument from "../pdf-ats/ATSResumeDocument";

// Memilih dokumen berdasarkan mode export
const pdfDocument = useMemo(() => {
  if (exportMode === "ats") {
    // Data disanitasi sebelum di-render ke PDF
    const cleanData = sanitizeResumeData(deferredData);
    return <ATSResumeDocument data={cleanData} language={language} />;
  }
  return <PDFResume data={deferredData} config={deferredConfig} />;
}, [deferredData, deferredConfig, exportMode, language]);

// BlobProvider mengkonversi React components menjadi PDF blob
<BlobProvider document={pdfDocument}>
  {({ url, blob, loading, error }) => (
    // url = blob:// URL lokal (bukan network URL)
    // blob = file PDF binary di memori browser
    // Tidak ada request ke server
    <a href={url} download={filename}>
      Download PDF
    </a>
  )}
</BlobProvider>

Sistem Autosave

EZCV menyimpan data CV kamu secara otomatis ke Local Storage browser setiap kali ada perubahan. Local Storage adalah penyimpanan bawaan browser yang hanya bisa diakses oleh website yang menyimpannya.

Data di Local Storage tetap ada meskipun kamu menutup browser atau mematikan komputer. Saat kamu membuka EZCV lagi, data terakhir akan dimuat secara otomatis.

Untuk menghapus data dari Local Storage, gunakan fitur "Reset" di aplikasi atau hapus data website melalui pengaturan browser.

Keamanan Data

• Tidak ada cookies tracking atau analytics yang dipasang.
• Tidak ada sistem login atau akun pengguna.
• Tidak ada database atau penyimpanan di sisi server.
• Tidak ada integrasi dengan layanan pihak ketiga yang mengakses data kamu.
• Data hanya tersimpan di Local Storage browser dan di memori browser selama tab terbuka.
• Kamu bisa memverifikasi bahwa tidak ada data yang dikirim keluar dengan membuka DevTools > Network tab saat menggunakan aplikasi.

Teknologi yang Digunakan

• Next.js 15 sebagai framework React untuk static site generation
• @react-pdf/renderer untuk pembuatan PDF di browser
• react-pdf untuk preview PDF di browser menggunakan canvas
• Tailwind CSS untuk styling komponen