This is a project born out of my frustration in creating certificates when a template is provided. This app allows the users to import the participant data sheet as well as the certificate template, place textboxes marked by ID (column names from the data sheet uploaded) and the generate the PDFs of certificates for all participants in one go.
This is a vibe coded project! Check out the hosted version of the Certificate Generator.
It works entirely on your device, no cloud resources required.
Certificates are a major headache after any event. Most of the time, the design team creates a certificate template and passes it onto the operations teams to create the individual certificates. I've scoured the internet in search of such a tool, but I wasn't able to find the sort of thing I was looking for.
This project is entirely vibe coded, with various bug fixes done along the way. There are a lot more issues to be solved, and you can check out the "Issues" section to contribute to this project.
04-11-2025: Since this is a vibe coded project, it is not perfectly functional. There are some placement issues with text when the certificates are generated, such as an offset from the position of the textbox, where the text is expected to be generated. But you can handle that by setting your own offset for the textbox in the opposite direction :)
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
To learn more about Next.js, take a look at the following resources:
- Next.js Documentation - learn about Next.js features and API.
- Learn Next.js - an interactive Next.js tutorial.
You can check out the Next.js GitHub repository - your feedback and contributions are welcome!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.