# How to Vibe Code Your Own Novorésumé (and Stop Paying for It) > Free Online Resume Builder - Site: https://novoresume.com - Category: Career & Resume Builder - Platforms: Web app - Verdict: **Solid side project** (72/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict You can build a functional personal resume builder clone in 2-3 weeks, but matching exact multi-page PDF pagination and layout fidelity requires tedious CSS print engineering. The core loop of a resume builder is essentially a structured JSON form bound to a styled print stylesheet. Building the form inputs, section organizers, and AI bullet rewriter is straightforward with Next.js and the Vercel AI SDK. However, you will inevitably hit friction when rendering multi-page layouts that export to pristine PDFs without awkward page breaks or clipped elements. For personal use, a simplified single-page PDF generator using modern CSS print media queries is plenty, but replicating Novorésumé's exact multi-column layout engine and 16 templates takes serious CSS discipline. ### What you can't replicate - 18 million organic users and top search engine rankings - Proprietary pre-vetted template designs refined over a decade ## What it does An online career and resume-building platform that helps job seekers create professional, ATS-friendly resumes and cover letters with built-in AI writing assistants and a Kanban job tracker. ### Core features - Interactive resume editor with live split-screen preview - Template engine supporting multiple column layouts and styling controls - Client-side or server-side high-fidelity PDF export matching browser view - AI bullet point generator and content rewriter using LLMs - Job description keyword matcher and ATS score analyzer - Kanban-style job search application tracker - Cover letter builder sharing matching template styling - Document versioning and content library ('My Content' storage) ## The business ### Pricing - Basic: Free — Ideal for students and single-page resumes - Premium - Monthly: $21.99 — Single payment, no automatic renewal - Premium - Yearly: $139.99 — Single payment, billed annually Founded 2016. Team size: 10-20. ## The hard parts - Pixel-perfect PDF generation: ensuring page breaks, CSS pagination, and margins match the web preview exactly across renderers - Layout constraint enforcement: allowing multi-column dynamic resume editing without breaking DOM bounds or overflowing pages - ATS compatibility parsing: structuring exported PDFs with clean text layers that automated parsers can reliably read ## How to vibe code Novorésumé ### Prerequisites - Node.js (free): Runtime environment for building and running the Next.js application. - GitHub (free): Version control and deployment pipeline integration. ### Recommended AI tools - Cursor: Ideal for iterative UI component styling, form layouts, and preview panes. - Claude Code: Great for scaffolding full-stack features, database schemas, and PDF export logic. ### Stack - Frontend: Next.js with Tailwind CSS - Backend: Next.js Server Actions / API Routes - Database: Turso (SQLite at the edge) - Auth: better-auth - Payments: None (personal use) - Other: Vercel AI SDK, Anthropic API for resume rewriting, html2pdf.js or react-pdf for export ### Hosting - Cloudflare (Hosting the full-stack Next.js application and serverless database connection): $0/mo ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize a Next.js project with Tailwind CSS, configure better-auth with SQLite via Turso, and set up the core data models for resumes, sections, and job tracker cards. ``` Create a new Next.js TypeScript project using App Router and Tailwind CSS. Configure better-auth with email/password authentication backed by a Turso SQLite database. Set up database schemas for users, resumes (storing form state as a JSON blob), and job_tracker_cards (with columns for status, company, role, notes). Create a clean dashboard landing page listing the user's resumes and an empty job search Kanban board. ``` 2. **Interactive Resume Editor UI & State Management** — Build a split-screen resume builder interface with form inputs on the left and a live-rendering preview sheet on the right. ``` Build a responsive resume editor page with a split-screen layout. The left side must feature accordion sections for personal info, summary, work experience, education, and skills, storing state in React context or local state synchronized with the backend. The right side must render a live preview sheet styled as an A4 or Letter document with adjustable color themes and font families. Ensure changes in the form instantly reflect in the preview. ``` 3. **AI Assistant & Keyword Matcher Integration** — Integrate the Vercel AI SDK and Anthropic API to provide bullet point rewriting and job description ATS keyword matching. ``` Implement AI assistant features using the Vercel AI SDK and Anthropic API. Add an 'Improve Bullet Point' button to work experience items that sends the draft text to an API route and streams back a results-driven achievement statement. Add a job description matching panel where users paste a target job description, and the AI analyzes the resume content, computes an ATS match score percentage, and returns missing keywords. ``` 4. **PDF Export Engine** — Implement reliable client-side or server-side PDF generation that exports the resume preview layout cleanly without visual artifacts. ``` Implement a PDF export function for the resume preview. Use client-side libraries like html2pdf.js or react-to-print configured with precise page dimensions, margins, and CSS print media queries to ensure multi-column templates and background colors export cleanly into a multi-page PDF document without breaking layout flow. ``` 5. **Kanban Job Search Tracker** — Build a drag-and-drop or column-based Kanban board to manage job applications. ``` Build a Kanban-style job search tracker dashboard. Include columns for 'Wishlist', 'Applied', 'Interviewing', 'Offer', and 'Rejected'. Allow users to create, edit, and drag job application cards between columns, adding notes, company names, and salary details stored in the Turso database. ``` ### Cost vs paying **Starting costs (one-time):** - AI Coding Assistant subscription (Cursor/Claude): $20.00 - Anthropic API credits for AI rewriter: $5.00 - Total: ~$25.00 one-time **Ongoing costs (monthly):** - Cloudflare & Turso free tiers: $0.00 - Anthropic API usage (personal volume): ~$2.00/mo - Total: ~$2.00/mo - Paying for the SaaS instead: $21.99 one-time (or equiv) - Build time: 25-35 hours - AI tool credits: $20 (Cursor/Claude Pro) - Break-even: N/A (built for personal use and learning) ## Sources - [Novorésumé Official Website](https://novoresume.com) - [Novorésumé Pricing Page](https://novoresume.com/pricing) - [Growjo Company Profile - Novorésumé](https://growjo.com/company/Novoresume)