A powerful, client-side bulk certificate generation tool built with Next.js. Generate hundreds of custom certificates with QR codes directly in your browser. No server uploads, total privacy.

• ⚡ Bulk Generation: Process hundreds of records from a single CSV file in seconds.
• 🎨 Custom Designs: Upload any image as your certificate template.
• 🔗 Smart QR Codes: Automatically generate and embed QR codes for verification links.
• 🖱️ Drag & Drop Editor: Intuitive UI to position text and QR codes on your template.
• 🔒 Privacy First: All processing happens locally in your browser. Your data never leaves your device.
• 📦 One-Click Zip: Download all generated certificates as a neatly organized ZIP archive.

• Framework: Next.js 14 (App Router)
• Styling: Tailwind CSS
• PDF Engine: pdf-lib
• CSV Parsing: Papa Parse
• QR Generation: qrcode
• Compression: JSZip

• Node.js 18.17 or later
• npm or yarn

1. Clone the repository

   git clone https://github.com/yourusername/certify.git
   cd certify/web

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Open the app Visit http://localhost:3000 in your browser.

Prepare a CSV file with your participant details. The file should have headers (e.g., Name, Email, VerifyLink).

Tip: The system automatically detects columns named "Name" or "Link".

Select which columns from your CSV correspond to the Recipient Name and Verification Link. You can skip the link if you don't need QR codes.

• Upload your certificate template (PNG or JPG).
• Use the controls to adjust the Position (X, Y), Font Size, and Color of the recipient's name.
• Position and resize the QR Code.
• The preview updates in real-time!

Click Generate. The app will process each row in your CSV, create a PDF, and bundle everything into a ZIP file for download.

web/
├── app/ # Next.js App Router
│ ├── page.tsx # Main application page
│ └── layout.tsx # Root layout
├── components/ # UI Components
│ ├── UploadStep.tsx # CSV file upload
│ ├── MappingStep.tsx # Column mapping logic
│ ├── DesignStep.tsx # Visual editor for certificate
│ └── GenerateStep.tsx # PDF generation & Zip logic
├── lib/ # Utilities (cn, etc.)
└── types/ # TypeScript interfaces

Contributions are always welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Distributed under the MIT License. See LICENSE for more information.