# CV Editor Engine — Development Guide

This guide turns the CV editor engine plan into concrete, incremental tasks you can implement. It defines scope, architecture, data model, workflows, templates, preview/export, validation, accessibility, security, performance, testing, and milestones with acceptance criteria.

## Objectives
- Deliver a fast, accessible CV builder with live preview and high-quality PDF export.
- Keep data structured and templates decoupled for ATS-friendly and visual layouts.
- Ensure printable parity between inline preview and final PDF output.

## Tech Stack
- Client: React, TailwindCSS, Zustand, TanStack Query, Tiptap (+ DOMPurify)
- Server: Node.js + Express for export, Puppeteer/Playwright for PDF rendering
- Validation: Zod (or Yup)
- Testing: Vitest/Jest, React Testing Library, Playwright for E2E

## Repo Layout (proposed)
```
src/
  components/        # UI building blocks (forms, lists, stepper)
  editors/           # Step editors (Heading, Work, Education, Skills, Summary)
  templates/         # Inline templates (ATS, Visual) + shared formatters
  printable/         # Printable HTML builder and styles (@page, A4)
  store/             # Zustand store, mutations and selectors
  services/          # API calls (save/load/export) and helpers
  utils/             # escapeHtml, sanitizers, validators, formatters
  hooks/             # autosave, debounced change tracking, accessibility
server/
  export/            # Express route for PDF export
tests/               # Unit, integration, E2E, visual regression
```

## Conventions
- Strictly sanitize user HTML via `DOMPurify` and escape all text in templates.
- Keep templates pure: accept CV JSON and return JSX/HTML; no side effects.
- Scope styles via CSS modules or Tailwind; avoid global leakage.
- Maintain preview ↔ printable parity using shared formatters and data.

## Data Model (Zod-style)
```ts
const CvSchema = z.object({
  personal: z.object({
    firstName: z.string().min(1),
    lastName: z.string().min(1),
    email: z.string().email(),
    phone: z.string().optional(),
    street: z.string().optional(),
    city: z.string().optional(),
    country: z.string().optional(),
    postcode: z.string().optional(),
    links: z.array(z.object({ label: z.string(), url: z.string().url() })).optional(),
    extras: z.array(z.string()).optional(), // e.g., LinkedIn, Website, Driving licence
  }),
  summary: z.string().max(600).optional(),
  work: z.array(z.object({
    id: z.string(),
    title: z.string().min(1),
    company: z.string().min(1),
    location: z.string().optional(),
    startDate: z.string(), // ISO or YYYY-MM
    endDate: z.string().optional(),
    bullets: z.array(z.string().max(160)).max(6),
    employmentType: z.enum(['full_time','part_time','contract','intern','freelance']).optional(),
  })),
  education: z.array(z.object({
    id: z.string(),
    degree: z.string().min(1),
    school: z.string().min(1),
    startDate: z.string(),
    endDate: z.string().optional(),
    notes: z.string().optional(),
  })),
  skills: z.array(z.object({ name: z.string(), level: z.enum(['Beginner','Intermediate','Advanced']).optional() })),
  languages: z.array(z.object({ name: z.string(), level: z.enum(['Basic','Conversational','Fluent','Native']) })).optional(),
  certifications: z.array(z.object({ name: z.string(), issuer: z.string().optional(), date: z.string().optional() })).optional(),
  templateId: z.string().default('ats'),
});
```

Validation rules
- Required: `firstName`, `lastName`, `email`; at least one of `work` or `education`.
- Bullets: 1–6 per role; each ≤160 chars; avoid trailing punctuation.
- Summary: ≤600 chars; discourage emojis; sanitize on save/render.
- Links: normalize to `https://`; restrict protocols to `http`, `https`.

## Editor Flow
- Stepper: Heading → Work → Education → Skills → Summary → Finalize
- Each step runs field validation on blur and pre-navigation; critical errors block Next (e.g., invalid email).
- Drag-and-drop reorder for Work and Skills; inline error messages with `aria-describedby`.

## Template System
- Template API: `{ id, name, renderer(cv), thumbnail? }`
- Shared formatters: `formatDate`, `formatLocation`, `escapeText`, `sanitizeHtml`.
- Templates
  - ATS: semantic lists, neutral styles, no sidebars, simple typographic accents.
  - Visual: sidebar contact, accented headings, subtle color blocks (similar to sample CV).

## Inline Preview
- Render chosen template directly from CV JSON; debounce heavy updates.
- Memoize template components; isolate styles via Tailwind scopes or modules.

## Printable Preview (Iframe)
- `buildPrintableHtml(cv)` returns a complete HTML document:
  - `<html>` with embedded CSS: `@page { size: A4; margin: 18mm }` and print-safe font stack.
  - No external scripts; all assets inline; background printing enabled.
- Load via `iframe srcDoc`; maintain parity with inline by sharing formatters and sanitized summary.

## Export Service
- Express `POST /export/pdf`
  - Input: CV JSON (validated on server)
  - Compose: `buildPrintableHtml(cv)`
  - Render: Puppeteer `page.setContent(html, { waitUntil: 'networkidle0' })`, `page.pdf({ format: 'A4', printBackground: true })`
  - Output: `application/pdf` stream with filename `cv-<lastName>-<YYYYMMDD>.pdf`
- Client: Export button calls endpoint; stream download; show progress & errors.

## Persistence & Autosave
- Autosave: debounce 1–2s after idle; mark dirty while saving; show last-saved timestamp.
- API
  - `GET /cv/:id` → load draft
  - `PUT /cv/:id` → save draft
  - `POST /export/pdf` → export
- Store integration via TanStack Query mutations and selectors in Zustand.

## Accessibility
- Labels with `htmlFor`; inputs with `aria-describedby` for errors; ensure WCAG AA contrast.
- Keyboard navigation for stepper and list CRUD; focus management after add/delete.
- Templates use semantic elements: `header`, `section`, `ul`, avoiding purely presentational markup.

## Security
- Sanitize summary on input and before render; escape all template-bound text.
- Restrict allowed URL protocols; validate `mailto:` only for email display links (never user-provided).
- No inline scripts; printable builder is self-contained HTML/CSS.

## Performance
- Debounce preview/autosave; throttle rapid list operations.
- Lazy-load noncritical components (template gallery); memoize heavy subtrees.
- Avoid large assets; prefer CSS accents; keep DOM size lean.

## Testing Strategy
- Unit
  - `escapeHtml`, `sanitizeHtml`, formatters, Zod validators, store selectors
- Integration
  - Inline ↔ printable parity across templates
  - Autosave flows and error handling
  - Export success/failure
- E2E (Playwright)
  - Create CV → navigate steps → validate errors → switch templates → preview → export PDF
- Visual Regression
  - Printable HTML screenshots per template and key data permutations

## Error Handling
- Centralized error boundary; step-level error summaries; non-blocking for non-critical issues.
- Graceful server errors with retry; maintain local draft if save/export fails.

## Milestones & Tasks

### M1 — Foundations
Tasks
- Initialize client app and Tailwind; set up routing.
- Create `CvSchema`, types, and helpers (normalization, IDs).
- Implement Zustand store: CV draft, active step, templateId, UI flags.
- Build Stepper and Heading editor form with validation.
- Implement ATS inline template and preview panel.
Acceptance
- User can enter heading details with inline validation and see preview update.
- Data stored in Zustand; template renders from CV JSON.

### M2 — Content Steps
Tasks
- Work editor: CRUD, reorder, bullet editor with length guidance.
- Education editor: CRUD; reuse shared list components.
- Skills editor: tag input + quick-add chips; optional level.
Acceptance
- Add/update/delete/reorder across steps; errors appear in-place; preview updates live.

### M3 — Summary & Printable
Tasks
- Integrate Tiptap (StarterKit + Placeholder); toolbar with basic marks.
- Sanitize output; store HTML + optional JSON.
- Implement `buildPrintableHtml(cv)` and iframe preview with A4 styles.
Acceptance
- Printable preview matches inline layout (content, spacing, formatting); summary sanitized.

### M4 — Persistence
Tasks
- Wire autosave with debounced mutations; load on mount.
- Add last-saved timestamp and dirty state.
- Handle save/load errors gracefully.
Acceptance
- Draft persists across reloads; autosave feels responsive and safe.

### M5 — Export
Tasks
- Server: Express route for `POST /export/pdf` using Puppeteer.
- Client: Export button; download with progress; error UI.
Acceptance
- PDF export produces a visually faithful A4 document with correct filename.

### M6 — Templates
Tasks
- Add Visual template; gallery picker with thumbnails and filters (ATS vs Visual).
- Persist `templateId`; ensure both inline and printable support switching.
Acceptance
- Users switch templates instantly; parity holds across preview and PDF.

### M7 — QA & Polish
Tasks
- Accessibility pass; performance tuning; code cleanup.
- Unit, integration, E2E, visual tests; CI workflow.
Acceptance
- Tests green; meets accessibility and performance targets.

### M8 — Enhancements (optional)
Tasks
- Import structured CV (JSON); version history; i18n; AI assist.
Acceptance
- Optional features are behind flags and do not regress core flows.

## Setup (placeholder)
Commands to run once you scaffold the app:
```
npm create vite@latest cv-engine -- --template react-ts
cd cv-engine
npm i tailwindcss @tiptap/react @tiptap/starter-kit dompurify zustand @tanstack/react-query zod puppeteer express
npx tailwindcss init -p
```
Adapt paths to your chosen structure. This repo currently contains planning documents only.

## Acceptance Criteria Checklist (global)
- Structured CV JSON validated end-to-end
- Live inline preview with ATS template by M1
- Printable HTML parity by M3 (layout, spacing, typography, sanitization)
- Autosave with clear feedback by M4
- Reliable PDF export by M5
- At least two templates with instant switching by M6
- Accessibility AA and test coverage by M7

## User Journey
- User starts by selecting a template from the gallery.
- They then navigate through the stepper to fill out their personal information, work experience, education, skills, and summary.
- Photo upload should only show if the selected template has a placeholder for a profile photo.
- After completing the steps, they can preview their CV in real-time with the selected template.
- If they are satisfied with the preview, they can export their CV as a PDF file.

## Glossary
- ATS: Applicant Tracking System; favors semantic, minimal styling.
- Parity: Inline preview and exported PDF display equivalent content/layout.
- Printable builder: Function that returns a self-contained HTML document for PDF rendering.

---
Use this README as the source of truth during implementation. Update sections as architecture evolves, but keep template parity, sanitization, and accessibility as non-negotiable constraints.