Build a Professional Resume Instantly – Full Project Walkthrough: Flask Web-Based Resume Builder with PDF Generation

Are you searching for a Resume Builder Web App project with a complete Python Flask code walkthrough? Want to create a professional PDF resume online using Python? You're in the right place!

In this article, I'll walk you through every detail of our Web-Based Resume Builder — project overview, detailed code explanation, features, working logic, and technology stack. Perfect for developers, students, freelancers, or anyone curious about building an online PDF resume generator. Let's dive in! 🚀

🌟 Project Overview #

Our Resume Builder is a web application where users fill out a simple form, upload a photo, and instantly generate a PDF resume.

Built with: Python (Flask), HTML5 + Tailwind CSS, and ReportLab for dynamic PDF creation.

Key features: a user-friendly form, photo upload support, an elegant two-column resume design, instant PDF download, and a responsive, mobile-friendly UI.

🛠️ Technology Stack #

📄 Full Code Explanation #

1. app.py — The Flask Server #

from flask import Flask, render_template, request, send_file, redirect, url_for
from reportlab.pdfgen import canvas
from reportlab.lib.pagesizes import A4
from reportlab.lib import colors
from textwrap import wrap
import os
from werkzeug.utils import secure_filename

Flask handles HTTP requests and serves web pages, ReportLab creates the PDF programmatically, textwrap wraps text cleanly inside the PDF, and Werkzeug ensures the uploaded photo is safely handled.

2. Flask App Setup #

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'static/uploads'

We initialize the Flask app and set a folder (static/uploads) to store profile photos safely.

3. Helper Function: Wrapping Text for the PDF #

def wrap_text(text, width):
    lines = []
    for line in text.split('\n'):
        lines.extend(wrap(line.strip(), width))
    return lines

This ensures long text like the summary, skills, and experience wraps neatly inside the PDF page.

4. Route: / — Home Page (Form) #

@app.route('/', methods=['GET', 'POST'])
def resume_form():
    if request.method == 'POST':
        data = request.form.to_dict()
        file = request.files.get('photo')

A GET request shows the form; a POST request collects the submitted data and uploaded photo.

5. Saving the Uploaded Photo #

if file and file.filename:
    filename = secure_filename(file.filename)
    photo_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
    file.save(photo_path)

We save it securely using Werkzeug's secure_filename to prevent malicious file names.

6. Generate the PDF #

file_path = generate_pdf(data, photo_path)
return send_file(file_path, as_attachment=True)

Once the data is collected, generate_pdf() creates the resume and the PDF is sent back to the user for download.

7. PDF Creation Logic #

c = canvas.Canvas(file_name, pagesize=A4)
width, height = A4

A new PDF canvas is created using ReportLab with A4 (standard resume) page size.

8. Sidebar Design (Left Column) #

def draw_sidebar():
    c.setFillColor(colors.HexColor("#2C3E50"))
    c.rect(0, 0, sidebar_width, height, fill=1)

This draws a dark sidebar on the left for Skills, Languages, Certificates, Awards, and Interests. If a photo is uploaded, it's added too:

if photo_path:
    c.drawImage(photo_path, 40, height - 120, width=80, height=80, mask='auto')

9. Main Content Section (Right Column) #

Sections include the header (name, email, phone), profile summary, work experience, and education. Each uses helper functions like draw_main_block() to organize text with bold titles and wrapped descriptions:

def draw_main_block(title, content):
    c.setFont("Helvetica-Bold", 12)
    c.drawString(content_x, y, f"• {title}")
    # Draw wrapped content here

10. Page Break Handling #

def check_page_break(extra_space_needed=60):
    if y < margin_bottom + extra_space_needed:
        draw_footer(page_number)
        c.showPage()
        # Reset drawing positions

11. Footer Section #

def draw_footer(page_num):
    footer_text = f"Page {page_num}"
    c.drawString((width - text_width) / 2, 20, footer_text)

📄 form.html — Frontend Form (TailwindCSS) #

<form method="POST" enctype="multipart/form-data" class="space-y-6">
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input type="text" name="phone" required>
    <textarea name="summary" rows="4"></textarea>
    ...
    <input type="file" name="photo">
    <button type="submit">Generate PDF Resume</button>
</form>

The form collects Name, Email, Phone, Summary, Skills, Experience, Education, Certificates, Languages, Awards, and Interests, plus a profile picture upload.

🚀 How It Works, Step-by-Step #

🎯 Key Advantages #

• 100% free and open source

• Mobile and desktop responsive

• Customizable sidebar and main content

• Secure uploads

• Professional, neat design

• Instant PDF generation (no external API needed)

📢 Conclusion #

This Flask Web-Based Resume Builder is the perfect solution for anyone wanting to quickly build a professional resume online. With minimal setup, clean code, a mobile-responsive design, and easy PDF export, it's an excellent project for students preparing for interviews, developers learning Flask + ReportLab, and freelancers offering online resume services. Download the source, deploy it, and customize it with your own colors, fonts, and templates! 🚀