PDF Certificate Maker

Create Bulk PDF Certificates in the Browser

Small React app used to automatically produce a bundle of PDF certificates from a list of names. Think Adobe Indesign's Data Merge feature.

To be used for mass-producing certificates of achievement and other such things.

Live example here: https://michaelclement.github.io/pdf-certificate-maker/dist/index.html

Development Process

This section covers developing the React app, webpack usage, and some other useful details.

Directory Structure

The key takeaway is that we add React components to src/components, and let everything else happen automatically. Then when we want to deploy to the actual server, we can just serve the contents of the dist folder, which will be an index.html, a bundle file, and any images the application uses.

- root
  - dist <- Everything in here is auto-generated by webpack
    * app.bundle.js
    * index.html
    * any image files, etc.
  - src  <- This is where we do our work
    - components <- React components go here
    * index.html
    * index.js

Pre-requisites:

• Install the required node packages: npm install
• Compile everything with webpack: npm run build
• Serve things locally in the browser: npm run start

Developing components

• Add React components to the /src/components directory.
• Add subdirectories in the components dir as needed to organize components

Using Tailwind CSS for styling

Read over the tailwind docs here: Tailwind

Add tailwind classes to your react components like so:

<h1 className="text-3xl font-bold underline">Hello world</h1>

If you want to define a custom CSS class you can do so in src/style.css