GetSetCV – AI-Powered Resume Builder

Project Overview

GetSetCV is a comprehensive resume-building platform designed to streamline the job application process. Recognizing that writing professional summaries and bullet points is often the biggest hurdle for job seekers, this application integrates AI to generate role-specific content automatically. The application provides a sleek, WYSIWYG (What You See Is What You Get) interface where users can select templates, fill in details, and instantly see their resume take shape.

The Problem

Building a resume editor on the web comes with a notorious technical hurdle: CSS for the screen is rarely perfect for print.
Most web-based editors struggle with "print fidelity." A resume might look perfect in a responsive div on a generic web page, but when the user hits "Download PDF" or prints it, margins break, fonts shift, and layouts crumble. I needed a way to guarantee that the live preview the user sees while editing is mathematically identical to the file they download.

Technical Challenges

1. Print vs. Screen Rendering: Standard React components are designed to be responsive (fluid), but resumes require fixed, rigid dimensions (A4 or Letter size).
2. Style Isolation: Global CSS styles from the application (navbars, buttons, dark mode themes) often bleed into the resume preview, ruining the formatting.
3. Real-Time Performance: Re-rendering a complex, multi-page document on every keystroke can cause significant lag.

The Solution: Iframe Sandbox Architecture

To solve the print fidelity and isolation issues, I engineered a decoupled rendering system:

• Isolated Preview Environment: Instead of rendering the resume component directly inside the main application DOM, I utilized an iframe. The resume is rendered as a completely separate, standalone page that is embedded within the editor.
• Live Data Syncing: I implemented a robust state management system that captures user input in the editor and injects it into the iframe in real-time.
• Responsive Scaling: To keep the UI responsive while displaying a fixed A4 document, I used CSS transformations to scale the iframe content dynamically based on the user's screen width, ensuring the "paper" always looks correct on mobile or desktop without altering the actual font sizes for printing.

Key Features

• AI Content Generation: Users can enter a job title (e.g., "Frontend Developer") and the AI suggests professional summaries and achievement bullet points.
• Real-Time Preview: Modifications update instantly without page reloads.
• Template System: Pre-defined, modular templates that automatically adjust layout based on content length.
• PDF Export: High-fidelity export that preserves the exact layout seen in the preview.

Tech Stack

• Framework: Next.js (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• State Management: React Context API
• Deployment: Vercel

Outcome

GetSetCV successfully bridges the gap between digital ease-of-use and physical document standards. The iframe implementation proved to be a critical architectural decision, eliminating 90% of the "print vs. screen" bugs common in similar applications and providing a seamless user experience.