Skip to content

[Frontend] Add PDF certificate generation and download for earned credentials #172

Description

@Penielka

Description

Users who earn credentials should be able to download a professionally formatted PDF certificate. The certificate should include: credential title, recipient name (wallet address), issuer name, issue date, verification hash, and a QR code linking to on-chain verification.

Definition of Done

  • PDF generation library integrated (e.g., @react-pdf/renderer or jspdf)
  • Certificate template with AetherMint branding
  • Dynamic fields: credential name, recipient, issuer, date, hash
  • QR code with verification URL embedded in certificate
  • Download button on credential detail page
  • PDF renders correctly in browser preview and download
  • Certificate is print-ready (300 DPI, proper margins)
  • Responsive: works on mobile and desktop

Acceptance Criteria

  1. Click "Download Certificate" on a credential detail page
  2. PDF downloads with correct metadata and formatting
  3. QR code scans to correct verification URL
  4. Certificate looks professional with branding, borders, and proper typography

Files to Modify

  • frontend/package.json — add @react-pdf/renderer or jspdf + qrcode
  • New file: frontend/src/components/Credentials/CertificatePDF.tsx — PDF template
  • New file: frontend/src/utils/certificateGenerator.ts — generation logic
  • frontend/src/components/CredentialList.tsx — add download button
  • frontend/src/components/CredentialBridge/index.tsx — add download button

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions