[V0_FILE]markdown:file="README.md" isMerged="true" # ResumeCraft - Professional Resume Builder This is a starter scaffold for ResumeCraft, a full-featured, secure, and maintainable resume builder application. ## Tech Stack - **Framework:** Next.js (App Router) + TypeScript - **Styling:** Tailwind CSS - **ORM:** Prisma - **Database:** PostgreSQL - **Authentication:** NextAuth.js - **Payments:** Stripe Billing - **Validation:** Zod - **PDF Generation:** Puppeteer (via a serverless function) ## Getting Started ### 1. Clone the repository \`\`\`bash # Your clone command here \`\`\` ### 2. Install dependencies \`\`\`bash npm install \`\`\` ### 3. Setup Environment Variables Create a `.env` file in the root of your project and add the following variables. See `.env.example` for a template. \`\`\`env # Database DATABASE_URL="postgresql://user:password@host:port/database?sslmode=require" # NextAuth.js # Generate a secret with `openssl rand -base64 32` NEXTAUTH_SECRET="your_nextauth_secret" NEXTAUTH_URL="http://localhost:3000" # You'll need a provider that supports email, like Postmark, SendGrid, etc. # For local development, you can use a local SMTP server or log to console. EMAIL_SERVER_USER="your_email_server_user" EMAIL_SERVER_PASSWORD="your_email_server_password" EMAIL_SERVER_HOST="your_email_server_host" EMAIL_SERVER_PORT="587" EMAIL_FROM="noreply@example.com" # Stripe STRIPE_SECRET_KEY="sk_test_..." STRIPE_PUBLISHABLE_KEY="pk_test_..." STRIPE_WEBHOOK_SECRET="whsec_..." # Price IDs from your Stripe Dashboard STRIPE_PRO_MONTHLY_PRICE_ID="price_..." STRIPE_PRO_YEARLY_PRICE_ID="price_..." \`\`\` ### 4. Setup PostgreSQL Database Make sure you have a PostgreSQL database running. You can use a local instance with Docker or a managed service like Neon or Supabase. ### 5. Run Prisma Migrations Apply the database schema to your database. \`\`\`bash npx prisma migrate dev \`\`\` ### 6. Seed the Database Populate the database with initial data (e.g., templates). \`\`\`bash npx prisma db seed \`\`\` ### 7. Run the Development Server \`\`\`bash npm run dev \`\`\` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. ### 8. Testing Stripe Webhooks Locally 1. Install the Stripe CLI: `stripe login` 2. Forward webhook events to your local server: \`\`\`bash stripe listen --forward-to localhost:3000/api/webhooks/stripe \`\`\` 3. The CLI will provide you with a webhook signing secret (`whsec_...`). Add this to your `.env` file as `STRIPE_WEBHOOK_SECRET`. ## Project Structure - `/app`: Next.js App Router pages and API routes. - `/components`: Shared React components. - `/lib`: Core logic, utilities, and client initializations (Prisma, Stripe, Auth). - `/prisma`: Database schema, migrations, and seed script. - `/styles`: Global CSS. [V0_FILE]json:file="package.json" isMerged="true" { "name": "resumecraft", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "prisma generate && next build", "start": "next start", "lint": "next lint", "postinstall": "prisma generate" }, "prisma": { "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} prisma/seed.ts" }, "dependencies": { "@next-auth/prisma-adapter": "^1.0.7", "@prisma/client": "^5.12.1", "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.0", "lucide-react": "^0.372.0", "next": "14.2.2", "next-auth": "^4.24.7", "nodemailer": "^6.9.13", "react": "^18", "react-dom": "^18", "react-hot-toast": "^2.4.1", "stripe": "^15.1.0", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", "zod": "^3.22.4" }, "devDependencies": { "@types/node": "^20", "@types/nodemailer": "^6.4.14", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.2", "postcss": "^8", "prisma": "^5.12.1", "tailwindcss": "^3.4.17", "ts-node": "^10.9.2", "typescript": "^5" } } [V0_FILE]plaintext:file="prisma/schema.prisma" isMerged="true" datasource db { provider = "postgresql" url = env("DATABASE_URL") } generator client { provider = "prisma-client-js" } model Account { id String @id @default(cuid()) userId String type String provider String providerAccountId String refresh_token String? @db.Text access_token String? @db.Text expires_at Int? token_type String? scope String? id_token String? @db.Text session_state String? user User @relation(fields: [userId], references: [id], onDelete: Cascade) @@unique([provider, providerAccountId]) } model Session { id String @id @default(cuid()) sessionToken String @unique userId String expires DateTime user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model VerificationToken { identifier String token String @unique expires DateTime @@unique([identifier, token]) } enum UserRole { USER ADMIN } model User { id String @id @default(cuid()) name String? email String? @unique emailVerified DateTime? passwordHash String? image String? role UserRole @default(USER) stripeCustomerId String? @unique createdAt DateTime @default(now()) updatedAt DateTime @updatedAt accounts Account[] sessions Session[] resumes Resume[] subscriptions Subscription[] exportLogs ExportLog[] } model Resume { id String @id @default(cuid()) title String data Json thumbnailUrl String? createdAt DateTime @default(now()) updatedAt DateTime @updatedAt userId String user User @relation(fields: [userId], references: [id], onDelete: Cascade) templateId String template Template @relation(fields: [templateId], references: [id]) exportLogs ExportLog[] } enum TemplateType { FREE PAID } model Template { id String @id @default(cuid()) name String slug String @unique description String priceCents Int @default(0) currency String @default("usd") type TemplateType contentHtml String contentCss String thumbnailUrl String isActive Boolean @default(true) isFeatured Boolean @default(false) createdAt DateTime @default(now()) updatedAt DateTime @updatedAt resumes Resume[] } enum SubscriptionStatus { ACTIVE CANCELED INCOMPLETE PAST_DUE TRIALING } model Subscription { id String @id @default(cuid()) userId String @unique stripeSubscriptionId String @unique stripePriceId String status SubscriptionStatus currentPeriodEnd DateTime createdAt DateTime @default(now()) updatedAt DateTime @updatedAt user User @relation(fields: [userId], references: [id], onDelete: Cascade) } model ExportLog { id String @id @default(cuid()) type String // "pdf" or "html" createdAt DateTime @default(now()) userId String user User @relation(fields: [userId], references: [id]) resumeId String resume Resume @relation(fields: [resumeId], references: [id]) } [V0_FILE]typescript:file="prisma/seed.ts" isMerged="true" import { PrismaClient, TemplateType } from "@prisma/client" const prisma = new PrismaClient() async function main() { console.log("Start seeding...") // Create Free Templates await prisma.template.createMany({ data: [ { name: "Classic Minimalist", slug: "classic-minimalist", description: "A clean, timeless template for all professions.", type: TemplateType.FREE, thumbnailUrl: "/templates/classic-minimalist.png", contentHtml: "

{name}

{email}

", contentCss: "h1 { font-size: 24px; }", }, { name: "Modern Chronological", slug: "modern-chronological", description: "A stylish template that highlights your career timeline.", type: TemplateType.FREE, thumbnailUrl: "/templates/modern-chronological.png", contentHtml: "

{name}

{summary}

", contentCss: "h2 { font-size: 22px; color: blue; }", }, ], skipDuplicates: true, }) // Create Paid Templates await prisma.template.createMany({ data: [ { name: "Creative Professional", slug: "creative-professional", description: "A bold template for designers and artists.", type: TemplateType.PAID, priceCents: 999, thumbnailUrl: "/templates/creative-professional.png", contentHtml: '

{name}

{portfolio}

', contentCss: ".creative { background: #f0f0f0; }", }, { name: "Executive Suite", slug: "executive-suite", description: "A premium, sophisticated template for leaders.", type: TemplateType.PAID, priceCents: 1499, thumbnailUrl: "/templates/executive-suite.png", contentHtml: '

{name}

{linkedin}

', contentCss: ".executive { border-left: 5px solid gold; }", }, ], skipDuplicates: true, }) console.log("Seeding finished.") } main() .catch((e) => { console.error(e) process.exit(1) }) .finally(async () => { await prisma.$disconnect() }) [V0_FILE]typescript:file="lib/prisma.ts" isFixed="true" isQuickEdit="true" isMerged="true" import { PrismaClient } from "@prisma/client" declare global { var prismaGlobal: PrismaClient | undefined } const prisma = global.prismaGlobal || new PrismaClient() if (process.env.NODE_ENV === "development") global.prismaGlobal = prisma export default prisma [V0_FILE]typescript:file="lib/auth.ts" isMerged="true" import { PrismaAdapter } from "@next-auth/prisma-adapter" import type { NextAuthOptions } from "next-auth" import EmailProvider from "next-auth/providers/email" import prisma from "./prisma" export const authOptions: NextAuthOptions = { adapter: PrismaAdapter(prisma), providers: [ EmailProvider({ server: { host: process.env.EMAIL_SERVER_HOST, port: Number(process.env.EMAIL_SERVER_PORT), auth: { user: process.env.EMAIL_SERVER_USER, pass: process.env.EMAIL_SERVER_PASSWORD, }, }, from: process.env.EMAIL_FROM, }), // Add other providers like Google or GitHub here ], session: { strategy: "jwt", }, callbacks: { async session({ token, session }) { if (token && session.user) { session.user.id = token.id as string session.user.role = token.role as string } return session }, async jwt({ token, user }) { if (user) { const dbUser = await prisma.user.findUnique({ where: { id: user.id }, }) if (dbUser) { token.id = dbUser.id token.role = dbUser.role } } return token }, }, pages: { signIn: "/login", verifyRequest: "/login/verify-request", }, } [V0_FILE]typescript:file="app/api/auth/[...nextauth]/route.ts" isMerged="true" import NextAuth from "next-auth" import { authOptions } from "@/lib/auth" const handler = NextAuth(authOptions) export { handler as GET, handler as POST } [V0_FILE]typescript:file="lib/stripe.ts" isMerged="true" import Stripe from "stripe" export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, { apiVersion: "2024-04-10", typescript: true, }) [V0_FILE]typescript:file="lib/subscription.ts" isMerged="true" import { authOptions } from "@/lib/auth" import prisma from "@/lib/prisma" import { getServerSession } from "next-auth" export async function hasActiveSubscription() { const session = await getServerSession(authOptions) if (!session?.user?.id) { return false } const subscription = await prisma.subscription.findUnique({ where: { userId: session.user.id, status: "ACTIVE", }, }) return !!subscription } export async function checkSubscription() { const session = await getServerSession(authOptions) if (!session?.user?.id) { return { hasSubscription: false, isPro: false } } const subscription = await prisma.subscription.findFirst({ where: { userId: session.user.id, status: "ACTIVE", }, }) return { hasSubscription: !!subscription, isPro: !!subscription, // You can add more logic for different plans } } [V0_FILE]typescript:file="app/api/webhooks/stripe/route.ts" isMerged="true" import { stripe } from "@/lib/stripe" import prisma from "@/lib/prisma" import { headers } from "next/headers" import type { Stripe } from "stripe" import { NextResponse } from "next/server" export async function POST(req: Request) { const body = await req.text() const signature = headers().get("Stripe-Signature") as string const webhookSecret = process.env.STRIPE_WEBHOOK_SECRET let event: Stripe.Event try { if (!signature || !webhookSecret) { throw new Error("Missing Stripe signature or webhook secret.") } event = stripe.webhooks.constructEvent(body, signature, webhookSecret) } catch (error: any) { console.error(`❌ Error message: ${error.message}`) return new NextResponse(`Webhook Error: ${error.message}`, { status: 400 }) } const session = event.data.object as Stripe.Checkout.Session switch (event.type) { case "checkout.session.completed": { const subscription = await stripe.subscriptions.retrieve(session.subscription as string) await prisma.subscription.create({ data: { userId: session.client_reference_id!, stripeSubscriptionId: subscription.id, stripePriceId: subscription.items.data[0].price.id, status: subscription.status, currentPeriodEnd: new Date(subscription.current_period_end * 1000), }, }) break } case "invoice.paid": { const subscription = await stripe.subscriptions.retrieve(session.subscription as string) await prisma.subscription.update({ where: { stripeSubscriptionId: subscription.id, }, data: { status: subscription.status, currentPeriodEnd: new Date(subscription.current_period_end * 1000), }, }) break } case "customer.subscription.deleted": case "customer.subscription.updated": { const subscription = event.data.object as Stripe.Subscription await prisma.subscription.update({ where: { stripeSubscriptionId: subscription.id, }, data: { status: subscription.status, currentPeriodEnd: new Date(subscription.current_period_end * 1000), }, }) break } default: console.warn(`Unhandled event type: ${event.type}`) } return NextResponse.json({ received: true }) } [V0_FILE]typescript:file="app/api/export/pdf/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" import { hasActiveSubscription } from "@/lib/subscription" // In a real-world scenario, you would use a library like 'puppeteer-core' // and deploy this as a Vercel Serverless Function with increased memory. // The v0 environment does not support running headless browsers directly. // This is a simulated endpoint. export async function POST(req: NextRequest) { const isPro = await hasActiveSubscription() // Example of rate-limiting for free users if (!isPro) { // Here you would check the ExportLog table against the user's ID // and return a 429 Too Many Requests if they exceeded their limit. return new NextResponse(JSON.stringify({ error: "Upgrade to Pro for unlimited exports." }), { status: 403 }) } const { html, css } = await req.json() if (!html) { return new NextResponse(JSON.stringify({ error: "HTML content is required." }), { status: 400, }) } try { // --- START: Real implementation with Puppeteer --- // const browser = await puppeteer.launch({ args: ['--no-sandbox'] }); // const page = await browser.newPage(); // await page.setContent(html); // if (css) { // await page.addStyleTag({ content: css }); // } // const pdfBuffer = await page.pdf({ format: 'A4', printBackground: true }); // await browser.close(); // --- END: Real implementation with Puppeteer --- // Simulated PDF buffer for demonstration purposes const pdfBuffer = Buffer.from( "%PDF-1.4\n1 0 obj\n<< /Type /Catalog /Pages 2 0 R >>\nendobj\n2 0 obj\n<< /Type /Pages /Kids [3 0 R] /Count 1 >>\nendobj\n3 0 obj\n<< /Type /Page /Parent 2 0 R /MediaBox [0 0 612 792] /Contents 4 0 R >>\nendobj\n4 0 obj\n<< /Length 55 >>\nstream\nBT\n/F1 12 Tf\n72 720 Td\n(Hello, this is a dummy PDF!) Tj\nET\nendstream\nendobj\nxref\n0 5\n0000000000 65535 f \n0000000010 00000 n \n0000000062 00000 n \n0000000121 00000 n \n0000000202 00000 n \ntrailer\n<< /Size 5 /Root 1 0 R >>\nstartxref\n303\n%%EOF", ) // Log the export action // await prisma.exportLog.create({ data: { ... } }); return new NextResponse(pdfBuffer, { headers: { "Content-Type": "application/pdf", "Content-Disposition": 'attachment; filename="resume.pdf"', }, }) } catch (error) { console.error("PDF generation failed:", error) return new NextResponse(JSON.stringify({ error: "Failed to generate PDF." }), { status: 500 }) } } [V0_FILE]typescript:file="app/templates/page.tsx" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import prisma from "@/lib/prisma" import { checkSubscription } from "@/lib/subscription" import { Badge } from "@/components/ui/badge" import Link from "next/link" import { UpgradeButton } from "@/components/upgrade-button" export default async function TemplatesPage() { const { isPro } = await checkSubscription() const templates = await prisma.template.findMany({ where: { isActive: true }, orderBy: { type: "asc" }, }) return (

Choose a Template

{templates.map((template) => { const isPaidTemplate = template.type === "PAID" const canAccess = !isPaidTemplate || isPro return (

{/* eslint-disable-next-line @next/next/no-img-element */} {template.name}

{template.name} {isPaidTemplate && PRO}

{template.description}

{canAccess ? ( ) : ( )} ) })}

) } [V0_FILE]typescript:file="components/upgrade-button.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { useSession } from "next-auth/react" import { useRouter } from "next/navigation" import { useState } from "react" import toast from "react-hot-toast" export function UpgradeButton({ text = "Upgrade to Pro" }: { text?: string }) { const { data: session, status } = useSession() const router = useRouter() const [loading, setLoading] = useState(false) const handleUpgrade = async () => { if (status !== "authenticated") { router.push("/login") return } setLoading(true) try { const res = await fetch("/api/checkout/session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ priceId: process.env.NEXT_PUBLIC_STRIPE_PRO_MONTHLY_PRICE_ID, // Ensure this is in your .env.local }), }) if (!res.ok) { throw new Error("Failed to create checkout session.") } const { url } = await res.json() if (url) { router.push(url) } } catch (error) { console.error(error) toast.error("Something went wrong. Please try again.") } finally { setLoading(false) } } return ( ) } [V0_FILE]typescript:file="app/api/checkout/session/route.ts" isMerged="true" import { stripe } from "@/lib/stripe" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { NextResponse } from "next/server" import prisma from "@/lib/prisma" export async function POST(req: Request) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return new NextResponse("Unauthorized", { status: 401 }) } const { priceId } = await req.json() const user = await prisma.user.findUnique({ where: { id: session.user.id } }) if (!user) { return new NextResponse("Unauthorized", { status: 401 }) } let stripeCustomerId = user.stripeCustomerId if (!stripeCustomerId) { const customer = await stripe.customers.create({ email: user.email!, name: user.name || undefined, }) stripeCustomerId = customer.id await prisma.user.update({ where: { id: user.id }, data: { stripeCustomerId }, }) } const checkoutSession = await stripe.checkout.sessions.create({ payment_method_types: ["card"], mode: "subscription", customer: stripeCustomerId, client_reference_id: user.id, line_items: [{ price: priceId, quantity: 1 }], success_url: `${process.env.NEXTAUTH_URL}/dashboard?payment=success`, cancel_url: `${process.env.NEXTAUTH_URL}/templates?payment=cancelled`, }) return NextResponse.json({ url: checkoutSession.url }) } [V0_FILE]typescript:file="app/dashboard/page.tsx" isMerged="true" import { getServerSession } from "next-auth" import { authOptions } from "@/lib/auth" import { redirect } from "next/navigation" import { checkSubscription } from "@/lib/subscription" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" export default async function DashboardPage() { const session = await getServerSession(authOptions) if (!session) { redirect("/login") } const { isPro } = await checkSubscription() return (

Welcome, {session.user?.name || "User"}!

You are on the {isPro ? Pro Plan : "Free Plan"}.

Your Resumes

You haven't created any resumes yet.

) } [V0_FILE]typescript:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { Toaster } from "react-hot-toast" import AuthProvider from "@/components/auth-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "ResumeCraft", description: "Build your professional resume in minutes.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescript:file="components/auth-provider.tsx" isMerged="true" "use client" import type React from "react" import { SessionProvider } from "next-auth/react" type Props = { children?: React.ReactNode } export default function AuthProvider({ children }: Props) { return {children} } [V0_FILE]typescript:file="types/next-auth.d.ts" isMerged="true" import type { DefaultSession } from "next-auth" declare module "next-auth" { interface Session { user: { id: string role: string } & DefaultSession["user"] } } [V0_FILE]typescript:file="types/resume.ts" isMerged="true" import { z } from "zod" // This schema defines the structure of the data that will be stored in the Resume's `data` JSON field. export const ResumeDataSchema = z.object({ personalInfo: z.object({ name: z.string().default("John Doe"), email: z.string().email().default("john.doe@example.com"), phone: z.string().default(""), location: z.string().default(""), website: z.string().url().optional().or(z.literal("")), }), summary: z.string().default("A passionate and driven professional..."), experience: z .array( z.object({ id: z.string().default(() => crypto.randomUUID()), company: z.string().default(""), role: z.string().default(""), startDate: z.string().default(""), endDate: z.string().default(""), description: z.string().default(""), }), ) .default([]), education: z .array( z.object({ id: z.string().default(() => crypto.randomUUID()), institution: z.string().default(""), degree: z.string().default(""), startDate: z.string().default(""), endDate: z.string().default(""), }), ) .default([]), skills: z .array( z.object({ id: z.string().default(() => crypto.randomUUID()), name: z.string().default(""), }), ) .default([]), }) export type ResumeData = z.infer export const initialResumeData: ResumeData = { personalInfo: { name: "Your Name", email: "your.email@provider.com", phone: "(555) 123-4567", location: "City, State", website: "https://your-portfolio.com", }, summary: "Detail-oriented and experienced professional with a proven track record of success in [Your Industry]. Skilled in [Skill 1], [Skill 2], and [Skill 3]. Seeking to leverage my expertise to contribute to a dynamic team.", experience: [ { id: crypto.randomUUID(), company: "Innovate Inc.", role: "Senior Developer", startDate: "Jan 2020", endDate: "Present", description: "- Led the development of a new web application, resulting in a 30% increase in user engagement.\n- Mentored junior developers and conducted code reviews to maintain high-quality standards.", }, ], education: [ { id: crypto.randomUUID(), institution: "University of Technology", degree: "B.S. in Computer Science", startDate: "Sep 2016", endDate: "May 2020", }, ], skills: [ { id: crypto.randomUUID(), name: "JavaScript" }, { id: crypto.randomUUID(), name: "React" }, { id: crypto.randomUUID(), name: "Next.js" }, ], } [V0_FILE]typescript:file="lib/actions/resume.ts" isMerged="true" "use server" import { getServerSession } from "next-auth" import { authOptions } from "../auth" import prisma from "../prisma" import { ResumeDataSchema, type ResumeData } from "@/types/resume" import { revalidatePath } from "next/cache" export async function saveResume(templateId: string, resumeData: ResumeData, resumeId?: string | null) { const session = await getServerSession(authOptions) if (!session?.user?.id) { return { error: "Unauthorized" } } const validation = ResumeDataSchema.safeParse(resumeData) if (!validation.success) { return { error: "Invalid data", details: validation.error.flatten() } } const data = { userId: session.user.id, templateId: templateId, title: `${resumeData.personalInfo.name}'s Resume`, data: validation.data as any, // Prisma expects JsonValue } try { let savedResume if (resumeId) { // Update existing resume savedResume = await prisma.resume.update({ where: { id: resumeId, userId: session.user.id }, data, }) } else { // Create new resume savedResume = await prisma.resume.create({ data, }) } revalidatePath("/dashboard") revalidatePath(`/editor/${savedResume.id}`) return { success: true, resume: savedResume } } catch (e) { console.error(e) return { error: "Failed to save resume." } } } [V0_FILE]typescript:file="app/editor/[slug]/page.tsx" isMerged="true" import { getServerSession } from "next-auth" import { notFound, redirect } from "next/navigation" import { authOptions } from "@/lib/auth" import prisma from "@/lib/prisma" import { checkSubscription } from "@/lib/subscription" import EditorClient from "./editor-client" import { initialResumeData } from "@/types/resume" export default async function EditorPage({ params }: { params: { slug: string } }) { const session = await getServerSession(authOptions) if (!session) { redirect("/login") } const { isPro } = await checkSubscription() // The slug could be a template slug OR a resume ID let resume = null let template = null // Try finding a resume by ID first resume = await prisma.resume.findFirst({ where: { id: params.slug, userId: session.user.id }, include: { template: true }, }) if (resume) { template = resume.template } else { // If not a resume ID, assume it's a template slug to create a new resume template = await prisma.template.findUnique({ where: { slug: params.slug }, }) } if (!template) { notFound() } // Subscription check for paid templates if (template.type === "PAID" && !isPro) { redirect("/templates?error=upgrade_required") } const resumeData = resume?.data ? resume.data : initialResumeData return } [V0_FILE]typescript:file="app/editor/[slug]/editor-client.tsx" isMerged="true" "use client" import { useState, useTransition } from "react" import type { Template, Resume } from "@prisma/client" import type { ResumeData } from "@/types/resume" import ResumeForm from "@/components/resume-form" import ResumePreview from "@/components/resume-preview" import { Button } from "@/components/ui/button" import { saveResume } from "@/lib/actions/resume" import toast from "react-hot-toast" import { useRouter } from "next/navigation" import { Save, Download } from "lucide-react" interface EditorClientProps { template: Template resume: Resume | null initialData: ResumeData } export default function EditorClient({ template, resume, initialData }: EditorClientProps) { const [data, setData] = useState(initialData) const [isSaving, startSaving] = useTransition() const router = useRouter() const handleSave = () => { startSaving(async () => { const result = await saveResume(template.id, data, resume?.id) if (result.error) { toast.error(result.error) } else { toast.success("Resume saved!") // If it was a new resume, redirect to the new resume's editor URL if (!resume?.id && result.resume?.id) { router.replace(`/editor/${result.resume.id}`) } } }) } const handleExport = async () => { toast.loading("Generating PDF...") const populatedHtml = template.contentHtml .replace(/{name}/g, data.personalInfo.name) .replace(/{email}/g, data.personalInfo.email) // Add more replacements for all fields .replace(/{summary}/g, data.summary) try { const response = await fetch("/api/export/pdf", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ html: populatedHtml, css: template.contentCss }), }) toast.dismiss() if (!response.ok) { const { error } = await response.json() throw new Error(error || "Failed to generate PDF.") } const blob = await response.blob() const url = window.URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "resume.pdf" document.body.appendChild(a) a.click() a.remove() window.URL.revokeObjectURL(url) toast.success("PDF downloaded!") } catch (error: any) { toast.dismiss() toast.error(error.message) } } return (

) } [V0_FILE]typescriptreact:file="components/resume-form.tsx" isMerged="true" "use client" import type React from "react" import type { ResumeData } from "@/types/resume" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" interface ResumeFormProps { data: ResumeData setData: React.Dispatch> } export default function ResumeForm({ data, setData }: ResumeFormProps) { const handlePersonalInfoChange = (field: keyof ResumeData["personalInfo"], value: string) => { setData((prev) => ({ ...prev, personalInfo: { ...prev.personalInfo, [field]: value } })) } const handleSummaryChange = (value: string) => { setData((prev) => ({ ...prev, summary: value })) } // Simplified handlers for this example. A real app would have more complex logic for array items. // For now, we'll just edit the first item if it exists. return ( Personal Information

Full Name handlePersonalInfoChange("name", e.target.value)} />

Email handlePersonalInfoChange("email", e.target.value)} />

Phone handlePersonalInfoChange("phone", e.target.value)} />

Location handlePersonalInfoChange("location", e.target.value)} />

Professional Summary

handleSummaryChange(e.target.value)}
            rows={5}
          />
        </AccordionContent>
      </AccordionItem>

<AccordionItem value="experience">
        <AccordionTrigger>Work Experience</AccordionTrigger>
        <AccordionContent>
          <p className="text-sm text-muted-foreground">Editing work experience will be added here.</p>
        </AccordionContent>
      </AccordionItem>

<AccordionItem value="education">
        <AccordionTrigger>Education</AccordionTrigger>
        <AccordionContent>
          <p className="text-sm text-muted-foreground">Editing education will be added here.</p>
        </AccordionContent>
      </AccordionItem>

<AccordionItem value="skills">
        <AccordionTrigger>Skills</AccordionTrigger>
        <AccordionContent>
          <p className="text-sm text-muted-foreground">Editing skills will be added here.</p>
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  )
}
[V0_FILE]typescriptreact:file="components/resume-preview.tsx" isMerged="true"
"use client"

import type { ResumeData } from "@/types/resume"
import { useMemo } from "react"

interface ResumePreviewProps {
  html: string
  css: string
  data: ResumeData
}

export default function ResumePreview({ html, css, data }: ResumePreviewProps) {
  const populatedHtml = useMemo(() => {
    // This is a basic replacement. A more robust solution might use a templating engine.
    return html
      .replace(/{name}/g, data.personalInfo.name || "")
      .replace(/{email}/g, data.personalInfo.email || "")
      .replace(/{phone}/g, data.personalInfo.phone || "")
      .replace(/{location}/g, data.personalInfo.location || "")
      .replace(/{summary}/g, data.summary || "")
    // ... add replacements for experience, education, skills etc.
  }, [html, data])

const srcDoc = `
    <html>
      <head>
        <style>${css}</style>
      </head>
      <body>
        ${populatedHtml}
      </body>
    </html>
  `

return (
    <div className="w-full h-full max-w-[8.5in] max-h-[11in] bg-background shadow-2xl">
      <iframe
        srcDoc={srcDoc}
        title="Resume Preview"
        className="w-full h-full border-0"
        sandbox="allow-same-origin" // For security, prevents scripts in the iframe
      />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { CheckCircle, FileText, Download, Zap } from "lucide-react"

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Header */}
      <header className="border-b bg-white/80 backdrop-blur-sm">
        <div className="container mx-auto px-4 py-4 flex items-center justify-between">
          <div className="flex items-center space-x-2">
            <FileText className="h-8 w-8 text-blue-600" />
            <h1 className="text-2xl font-bold text-gray-900">ResumeCraft</h1>
          </div>
          <nav className="hidden md:flex items-center space-x-6">
            <Link href="/templates" className="text-gray-600 hover:text-gray-900">
              Templates
            </Link>
            <Link href="/pricing" className="text-gray-600 hover:text-gray-900">
              Pricing
            </Link>
            <Link href="/auth/signin" className="text-gray-600 hover:text-gray-900">
              Sign In
            </Link>
            <Button asChild>
              <Link href="/auth/signup">Get Started</Link>
            </Button>
          </nav>
        </div>
      </header>

{/* Hero Section */}
      <section className="py-20 px-4">
        <div className="container mx-auto text-center">
          <h2 className="text-5xl font-bold text-gray-900 mb-6">
            Build Your Professional Resume
            <span className="text-blue-600"> in Minutes</span>
          </h2>
          <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
            Create stunning, ATS-friendly resumes with our professional templates. Stand out from the crowd and land
            your dream job.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" asChild className="text-lg px-8 py-3">
              <Link href="/templates">Start Building</Link>
            </Button>
            <Button size="lg" variant="outline" asChild className="text-lg px-8 py-3 bg-transparent">
              <Link href="/templates">View Templates</Link>
            </Button>
          </div>
        </div>
      </section>

{/* Features Section */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto">
          <h3 className="text-3xl font-bold text-center text-gray-900 mb-12">Why Choose ResumeCraft?</h3>
          <div className="grid md:grid-cols-3 gap-8">
            <Card className="text-center">
              <CardHeader>
                <Zap className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                <CardTitle>Lightning Fast</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  Create professional resumes in minutes, not hours. Our intuitive editor makes it easy.
                </CardDescription>
              </CardContent>
            </Card>

<Card className="text-center">
              <CardHeader>
                <FileText className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                <CardTitle>Professional Templates</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  Choose from dozens of professionally designed templates that pass ATS systems.
                </CardDescription>
              </CardContent>
            </Card>

<Card className="text-center">
              <CardHeader>
                <Download className="h-12 w-12 text-blue-600 mx-auto mb-4" />
                <CardTitle>Export Ready</CardTitle>
              </CardHeader>
              <CardContent>
                <CardDescription>
                  Download your resume as a high-quality PDF ready for job applications.
                </CardDescription>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Pricing Preview */}
      <section className="py-16 px-4 bg-gray-50">
        <div className="container mx-auto text-center">
          <h3 className="text-3xl font-bold text-gray-900 mb-8">Simple, Transparent Pricing</h3>
          <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
            <Card>
              <CardHeader>
                <CardTitle className="text-2xl">Free</CardTitle>
                <CardDescription className="text-3xl font-bold text-gray-900">$0</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>3 basic templates</span>
                </div>
                <div className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>PDF export</span>
                </div>
                <div className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>Basic editor</span>
                </div>
                <Button variant="outline" className="w-full bg-transparent" asChild>
                  <Link href="/auth/signup">Get Started Free</Link>
                </Button>
              </CardContent>
            </Card>

<Card className="border-blue-600 relative">
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                <span className="bg-blue-600 text-white px-4 py-1 rounded-full text-sm">Popular</span>
              </div>
              <CardHeader>
                <CardTitle className="text-2xl">Pro</CardTitle>
                <CardDescription className="text-3xl font-bold text-gray-900">
                  $9.99<span className="text-base font-normal">/month</span>
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>50+ premium templates</span>
                </div>
                <div className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>Advanced editor</span>
                </div>
                <div className="flex items-center space-x-2">
                  <CheckCircle className="h-5 w-5 text-green-600" />
                  <span>Priority support</span>
                </div>
                <Button className="w-full" asChild>
                  <Link href="/auth/signup">Start Pro Trial</Link>
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

{/* Footer */}
      <footer className="bg-gray-900 text-white py-12 px-4">
        <div className="container mx-auto text-center">
          <div className="flex items-center justify-center space-x-2 mb-4">
            <FileText className="h-6 w-6" />
            <span className="text-xl font-bold">ResumeCraft</span>
          </div>
          <p className="text-gray-400 mb-4">Build professional resumes that get you hired.</p>
          <div className="flex justify-center space-x-6 text-sm">
            <Link href="/privacy" className="text-gray-400 hover:text-white">
              Privacy Policy
            </Link>
            <Link href="/terms" className="text-gray-400 hover:text-white">
              Terms of Service
            </Link>
            <Link href="/contact" className="text-gray-400 hover:text-white">
              Contact
            </Link>
          </div>
        </div>
      </footer>
    </div>
  )
}</article></body></html>