How to vibe codeKickresume

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js full-stack framework

• GitHubfree

  Code hosting and deployment pipeline integration

• 

  OpenAI API AccountPay-as-you-go (~$5 starting credit)

  Required for GPT-powered resume writing and rewriting features

AI coding 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

Build guide

1. 01Project 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Resume 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Live 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05PDF 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Kickresume