# How to Vibe Code Your Own Kickresume (and Stop Paying for It) > Best Online Resume & Cover Letter Builder - Site: https://kickresume.com - Category: Career & Resume Builder - Verdict: **Solid side project** (65/100 vibecodeable) - Estimated effort: 2-3 weeks part-time ## Verdict Build a personal subset for your own job hunt, but keep paying if you need polished multi-column PDF layout engines and thousands of pre-baked templates. Vicbecoding a personal resume builder with AI text generation is a classic single-loop SaaS that is very achievable using modern agentic tools. The database schema and CRUD for resume sections are trivial. The main trap is the PDF export engine: getting multi-page HTML/CSS layouts to export via headless browser rendering without awkward line breaks or overlapping text fields takes tedious CSS debugging and print-media styling. ### What you can't replicate - 8 million registered users and massive SEO traffic footprint - Years of fine-tuned HR expert phrasing libraries across thousands of job roles - Existing enterprise partnerships and brand trust ## What it does An online career platform and document builder that helps job seekers create professional resumes, cover letters, and personal portfolio websites using AI generation and typographic templates. ### Core features - Resume and cover letter section form builder - OpenAI GPT-driven resume bullet point writer and rewriter - Multi-column typographic PDF rendering and export engine - Pre-written phrasing templates indexed by job titles - Resume checker and ATS optimization scoring - Personal portfolio website generation from resume data ## The business ### Pricing - Free Tier: Free - Monthly Plan: $24.00 / month - Yearly Plan: $8.00 / month ### Funding $400,000 raised. - Seed Investors: CEED Tech, VentureOut (US) Founded 2013. Team size: 20 to 36. ## The hard parts - Pixel-perfect multi-page PDF generation with custom typography and clean page breaks without clipping - Ensuring exported PDFs maintain clean ATS-compatible text reading order and extractable text layers - Prompt engineering wrappers that reliably generate resume-ready phrasing matching profession-specific formatting ## How to vibe code Kickresume ### Prerequisites - Node.js (free): Runtime environment for the Next.js full-stack framework - GitHub (free): Code hosting and deployment pipeline integration - OpenAI API Account (Pay-as-you-go (~$5 starting credit)): Required for GPT-powered resume writing and rewriting features ### Recommended AI tools - Claude Code: Best-in-class agentic coding tool for scaffolding the entire Next.js application and debugging layout engines - Cursor: Ideal AI code editor for fine-tuning React components and print-specific CSS layouts ### Stack - Frontend: Next.js with Tailwind CSS and Shadcn/ui - Backend: Next.js App Router API Routes - Database: Turso (SQLite at the edge) - Auth: better-auth - Payments: none (personal use clone) - Other: Vercel AI SDK, OpenAI API, Puppeteer / Browser Rendering for PDF generation ### Hosting - Vercel (Hosting the Next.js frontend and serverless API routes): $0/mo (Hobby Tier) - Turso (Serverless SQLite database for user resumes and profile data): $0/mo (Free Tier) ### Build guide 1. **Project Scaffolding and Database Schema** — Initialize the Next.js project with Tailwind CSS, configure Turso database connectivity, and set up better-auth for secure single-user access. ``` Create a new Next.js 16 project using TypeScript, Tailwind CSS, and App Router. Set up better-auth with email/password authentication backed by a Turso SQLite database using Drizzle ORM. Define database schemas for users, resumes (title, template_id, personal_info json, experience json, education json, skills json), and cover_letters. Create a clean dashboard layout with sidebar navigation for My Documents, Templates, and Settings. Ensure all configurations are fully typed and error-free. ``` 2. **Resume Editor Form Builder** — Build a multi-section interactive form interface that updates local and server-side resume state dynamically. ``` Build a dynamic resume editor form in Next.js using React Hook Form and Zod validation. The interface should feature collapsible sections for Personal Info, Summary, Work Experience (with company, role, dates, bullet points), Education, and Skills. State changes should auto-save debounced to the Turso database via server actions. Include UI controls to add, remove, and reorder list items within each resume section. ``` 3. **AI Resume Bullet Point Writer** — Integrate the Vercel AI SDK and OpenAI API to generate and rewrite professional resume bullet points based on job titles. ``` Implement an AI writing assistant using the Vercel AI SDK and OpenAI API route (`/api/ai/generate`). Create a React component that triggers when a user clicks 'Use AI Writer' inside a Work Experience entry. The prompt should accept a job title and task description, returning 3-4 professional, impact-driven resume bullet points in JSON format. Provide UI actions to accept, regenerate, or insert the generated bullet points directly into the active resume state. ``` 4. **Live Template Preview and Styling** — Create responsive, typographic resume preview templates that reflect live edits made in the form builder. ``` Create two distinct resume preview templates (e.g., 'Modern' and 'Classic') as React components. They must render live data from the resume state with professional typography, custom margins, and clean grid alignments matching professional resume standards. Implement a split-screen layout where the left side is the form editor and the right side is a live-updating preview pane that scales nicely on screen. ``` 5. **PDF Export and ATS Optimization** — Implement server-side PDF compilation and an ATS scoring checker comparing resume text against job descriptions. ``` Implement a PDF export feature using a headless browser rendering approach (or print stylesheet optimization) to convert the resume preview template into a clean, multi-page vector-accurate PDF download with selectable text layers for ATS compatibility. Additionally, create an ATS Resume Checker page where users paste a target job description; write a server action using OpenAI to compare the resume text against the job description, compute a match score percentage, and return specific missing keywords and actionable improvement tips. ``` ### Cost vs paying **Starting costs (one-time):** - OpenAI API starting credit: $5.00 - Total: ~$5.00 one-time **Ongoing costs (monthly):** - OpenAI API usage for resume generation: ~$2.00/mo - Total: ~$2.00/mo - Paying for the SaaS instead: $24.00 / month - Build time: 16-24 hours - AI tool credits: $20/mo (Claude Pro) - Break-even: Under 1 month if replacing paid subscription ## Sources - [Kickresume Homepage & Scraped Context](https://kickresume.com) - [PitchBook Kickresume Company Profile](https://pitchbook.com) - [GetLatka Financial Metrics for Kickresume](https://getlatka.com)