HEAD

Cert Merge Studio LK

Certificate Template Studio for Sri Lankan Embassies and Consulates. This tool streamlines printing of birth certificates that are often prepared manually (with Excel and eyeballing alignment). It provides a precise, millimeter-accurate template editor, CSV-driven data filling, and a WYSIWYG print preview so officers can produce consistent, professional certificates faster and with fewer errors.

Note: This is a community-built project intended to assist Sri Lankan government missions abroad. It is not an official government product. Always validate outputs against your mission’s standards and policies before issuance.

✨ Highlights

• Millimeter-precision canvas with rulers and grid for exact alignment
• Built-in pages for the full workflow: Client (Front/Back), Embassy (Front/Back), Sri Lanka (Front/Back)
• Multi-select, copy/paste, bulk drag, and Undo (Ctrl/Cmd+Z)
• Background image overlay for aligning to scanned/official templates (with opacity control)
• CSV import to create/update fields by page and title
• Print dialog with live WYSIWYG preview (A4/Letter/Legal)
• Local template manager with import/export to JSON
• 100% client-side (no backend); data persists locally

📸 Screenshots

🧭 How it works (at a glance)

• Design certificate pages with boxes positioned and sized in millimeters.
• Optionally add a faint background image of your official form to align fields precisely.
• Import a CSV such as: Page,Field Title,Field Content to auto-create/update fields.
• Use the Test Print dialog to preview and print a page at true scale.
• Save, export, and import templates to share across workstations.

🧱 Tech stack

• Vite + React + TypeScript
• Tailwind CSS + shadcn/ui components
• react-konva for millimeter-accurate canvas rendering
• Local storage for persistence, no server required

📂 Project structure

• src/components/TemplateEditor.tsx – core millimeter canvas editor with rulers, grid, background image, drag/resize, undo
• src/components/CSVImport.tsx – CSV parser to create/update fields per page
• src/components/TemplateManager.tsx and TemplateImportExport.tsx – save/load templates, JSON import/export
• src/pages/Index.tsx – main tabs UI

🚀 Getting started (local)

Prerequisites: Node.js 18+ (Node 20 recommended).

# 1) Install deps
npm install

# 2) Start dev server
npm run dev

# 3) Build for production
npm run build

# 4) Preview production build locally
npm run preview

🏗️ Production build

The build output is a static site in dist/ and can be hosted on any static host (GitHub Pages, Cloudflare Pages, Netlify, Vercel, S3, etc.).

🌐 Deploy to GitHub Pages (recommended)

This repository includes a ready-to-use GitHub Actions workflow: .github/workflows/deploy.yml.

What it does:

• Builds the project with the proper base path for repository pages
• Adds a SPA fallback (404.html) so deep links work
• Publishes the dist/ folder to GitHub Pages automatically on pushes to main

Steps:

1. Push this repository to GitHub (public recommended)
2. Go to Settings → Pages → Build and deployment → Source: “GitHub Actions”
3. Ensure your default branch is main (or update the workflow trigger)
4. Commit and push; the site will auto-deploy.

Base path configuration:

• The Vite config reads BASE_PATH at build time. The workflow sets it to /<repo>/ so assets resolve correctly under https://<user>.github.io/<repo>/.
• If you are deploying to a user/org site (e.g., <user>.github.io), set BASE_PATH to /.

Manual build with a base path:

$env:BASE_PATH = "/<your-repo>/"
npm run build

☁️ Deploy to Vercel or Netlify

• Vercel: Import the repo, set framework to Vite (auto-detected). No special config needed. BASE_PATH can be /.

• Netlify: Build command npm run build, publish directory dist. Add a redirect for SPA:

  Create public/_redirects with:

  /*    /index.html   200
  

🔐 Data privacy and security

• This app runs fully in the browser and stores templates locally.
• No form data is uploaded to a server by this app.
• Ensure that any CSVs or background images you use comply with your mission’s data policies.

⚖️ Disclaimer

This software is provided “as is”, without warranty of any kind. It is not an official product of the Government of Sri Lanka. Users are responsible for verifying correctness and compliance with consular/embassy standards before issuing documents.

🗺️ Roadmap

• Data merge automation across pages
• Multi-language/localization
• Field-level validation and formatting presets
• Role-based access (if a backend is introduced)

🤝 Contributing

Issues and pull requests are welcome. For larger changes, please open an issue first to discuss the approach.

📄 License

MIT License. See LICENSE (or set one if absent).

---