Create a CV Maker Web Application using Node.js

Post Views: 13

In this project, we will learn how to build a CV Maker Web Application using Node.js. This application allows users to enter their professional details into a form and instantly download a beautifully formatted PDF resume.

Building this project is a great way to understand how to handle user input, render dynamic HTML templates, and convert web pages into downloadable documents.

This project is useful when :

You want to automate document creation.
You want to learn how to use EJS for dynamic content.
You want to master Puppeteer for generating PDFs from HTML.

Prerequisites

Before we start, make sure you have the following installed:

Node.js (Installed on your system)
A Code Editor (VS Code recommended)

Step 1: Project Setup

First, we need to set up our workspace and install the necessary libraries.

1. Create a Project Folder

mkdir cv-maker && cd cv-maker

2. Initialize the Node Project

npm init -y

3. Install Required Packages

express: to create our web server.
ejs: A templating engine to create the CV layout.
puppeteer: A powerful tool that acts like a browser to “print” our HTML into a PDF.
body-parser: To read the data sent from the HTML form.

npm install express ejs puppeteer body-parser

Step 2: Writing the Code

1. Setting up the server (app.js)

Create a file named app.js. This is where we define our routes and logic.

const express = require('express');
const puppeteer = require('puppeteer');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));

// Route to show the form
app.get('/', (req, res) => {
    res.render('index');
});

// Route to handle CV generation
app.post('/generate-cv', async (req, res) => {
    const userData = req.body;

    try {
        // Render the EJS template into an HTML string
        res.render('cv-template', { data: userData }, async (err, html) => {
            if (err) return res.send("Error rendering template");

            // Use Puppeteer to convert HTML to PDF
            const browser = await puppeteer.launch();
            const page = await browser.newPage();
            await page.setContent(html, { waitUntil: 'networkidle0' });
            const pdfBuffer = await page.pdf({ format: 'A4', printBackground: true });

            await browser.close();

            // Send the PDF to the browser for download
            res.contentType("application/pdf");
            res.send(pdfBuffer);
        });
    } catch (error) {
        console.error("Error generating PDF:", error);
        res.status(500).send("Something went wrong!");
    }
});

app.listen(3000, () => console.log("Server running on http://localhost:3000"));

Step-by-Step Code Explanation

1. Importing Modules and Initializing Express

At the very top, we bring in the tools needed to build the app:

express: The framework that handles web requests.
puppeteer: A handles the browser that “prints” our HTML into a PDF.
bpdyParser: This middleware is essential; it parses the data coming from your HTML form so that Node.js can read it.
app.set(‘view engine’, ‘ejs’ ): This tells Express that we are using EJS to create our dynamic HTML templates.

2. The Main Route (GET / )

app.get('/', (req, res) => {
    res.render('index');
});

When a user visits your website (at localhost: 3000), the server triggers this route, which tells Express to look into the views folder and show the index. ejs file, which contains our input form.

3. Processing Form Data ( POST /generate-cv )

When the user clicks the “Generate PDF” button, the form sends data to this route.

req.body: This object holds all the info the user typed ( Name, Email, etc.).
res. render( ‘cv-template”, { data: userData }, …): This is the most important part. Express takes the user’s data and injects it into the CV template. ejs file. Instead, Express takes the user’s data and injects it into the CV template. ejs file. Instead of showing it in the browser, we capture that rendered HTML as a string.

4. Converting HTML to PDF with Puppeteer

Once we have the HTML ready, we use Puppeteer to turn it into a document:

puppeteer.launch(): This opens a background (invisible) instance of Chrome.
page.setContent(html): We “paste” our generated HTML into a new page in that background browser.
page.pdf({ format: ‘A4’ }): we tell the browser to take a snapshot of the page in A4 size. This creates a Buffer ( a raw data format of the PDF ).
browser.close(): We shut down the background browser to save memory.

5. Sending the file to the User

res.contentType("application/pdf");
res.send(pdfBuffer);

Finally, we tell the user’s browser: “The data I am sending you is not a webpage, it is a PDF.” The browser then automatically opens the PDF or starts the download.

2. Creating the Input Form ( view/index.ejs )

Create a folder named views and add index.ejs. This is the UI where the user enters their information.

<form action="/generate-cv" method="POST">
    <input type="text" name="name" placeholder="Full Name" required>
    <input type="text" name="email" placeholder="Email">
    <textarea name="education" placeholder="Education Details"></textarea>
    <textarea name="skills" placeholder="Skills (comma separated)"></textarea>
    <button type="submit">Generate PDF CV</button>
</form>

3. The CV Template (views/cv-template.ejs)

This file defines how the final CV looks. You can use CSS here to make it look professional.

<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; padding: 40px; }
        h1 { color: #333; border-bottom: 2px solid #333; }
        .section { margin-top: 20px; }
    </style>
</head>
<body>
    <h1><%= data.name %></h1>
    <p>Email: <%= data.email %></p>
    
    <div class="section">
        <h3>Education</h3>
        <p><%= data.education %></p>
    </div>

    <div class="section">
        <h3>Skills</h3>
        <p><%= data.skills %></p>
    </div>
</body>
</html>

Step 3: Understanding the Logic

Rendering with EJS
res.render(‘cv-template’, { data: userData }, …)
This part takes the data from the user and “injects” it into the HTML template. it’s like a fill-in-the-blanks system for your CV.
The PDF Engine ( Puppeteer )
Instead of just showing the HTML, we use Puppeteer. It opens a hidden (headless) Chrome browser, pastes your CV HTML, and saves it as an A4 PDF. This ensures the formatting stays perfect for the user.

Step 4: Running the Project

Open your terminal in the project folder.
Run the command:
```
node app.js
```
Open http://localhost:3000 in your browser.
Fill in your details and click Generate PDF

Output :

Your browser will immediately download a file named document.pdf (or open it in a new tab) containing your professional CV!