Build An AI Resume Builder SaaS Application (Next.js 15, Stripe Checkout, Hook Form, TypeScript)

Build and deploy a professional full-stack SaaS (software as a service) application with the following features: -Next.js 15 -Stripe Checkout with different subscription tiers & customer portal -AI auto-fill using the ChatGPT API -Multi-step form with React Hook Form -Dynamic forms with useFieldArray -Drag and drop reordering with dnd-kit -Autosave changes after debounce -Resume design customizations -Image upload to Vercel Blob -Postgres DB with Prisma ORM -Authentication with Clerk v6 -Server actions & API route handlers -Frontend & backend input validation with Zod schemas -Tailwind CSS & Shadcn UI components -Mobile responsive layout -Dark mode, light mode, and system theme -Print or save as PDF with react-to-print -URL state management with search params -Global dialog with Zustand -Intelligent caching & context providers -Deployment to Vercel -Optimal VS Code setup with Prettier, plugins, and extensions Starting code: https://github.com/codinginflow/nextjs-15-ai-resume-builder/tree/0-Starting-point Sign up for Clerk: https://go.clerk.com/BfiD7iv Project files: Shadcn custom theme (global.css): https://github.com/codinginflow/nextjs-15-ai-resume-builder/blob/0-Starting-point/src/app/globals.css Asset files: https://github.com/codinginflow/nextjs-15-ai-resume-builder/tree/0-Starting-point/src/assets Favicon: https://github.com/codinginflow/nextjs-15-ai-resume-builder/blob/0-Starting-point/src/app/favicon.ico Opengraph-image: https://github.com/codinginflow/nextjs-15-ai-resume-builder/blob/0-Starting-point/src/app/opengraph-image.png ChatGPT work experience regex: https://github.com/codinginflow/nextjs-15-ai-resume-builder/blob/ed2416360377f047ed76a5166b583c698996dc2a/src/app/(main)/editor/forms/actions.ts#L147-L153 Terms of service (tos) page: https://github.com/codinginflow/nextjs-15-ai-resume-builder/blob/Final-project/src/app/tos/page.tsx Full source code: https://github.com/codinginflow/nextjs-15-ai-resume-builder ⭐ Get my full-stack Next.js with Express & TypeScript course: https://codinginflow.com/nextjs ✅ Get my free React Best Practices course: https://www.codinginflow.com/reactbestpractices 💌 Join my newsletter for regular web dev tips: https://codinginflow.com/newsletter 💬 Join our developer community on Discord: https://codinginflow.com/discord 📣 Follow Coding in Flow on social media: Twitter: https://twitter.com/codinginflow Instagram: https://instagram.com/codinginflow TikTok: https://tiktok.com/@codinginflow Facebook: https://facebook.com/codinginflow Timestamps: 0:00 - Project overview 20:53 - Project & IDE setup (create-next-app, Shadcn UI, Prettier Tailwind plugin, VS Code extensions) 47:21 - Database setup (Vercel Postgres + Prisma ORM) 57:30 - Clerk v6 authentication setup (middleware, customizations, custom sign-in/sign-up routes) 1:14:33 - Navbar, Clerk UserButton, nested layout.tsx 1:23:39 - Dark mode (next-themes, clerk/themes) 1:34:30 - Resume editor (React Hook Form, FormField, useFieldArray, Zod refine, server actions, auto-save hook) 6:30:29 - AI features (ChatGPT API) 7:23:33 - Fetch existing resumes 7:40:27 - Delete resumes (useTransition, revalidatePath) 7:55:08 - Print resumes & save as PDF (react-to-print) 8:04:11 - Responsive landing page (Shadcn custom button variant) 8:16:59 - Global modal/dialog with Zustand 8:33:36 - Stripe Checkout (subscriptions) 8:58:58 - Type-safe environment variables with t3-env 9:05:03 - Save/fetch subscriptions (React cache, context provider) 9:22:03 - Permission system (premium features) 9:39:52 - Stripe webhook/event destinations (fulfillment) 10:18:30 - Stripe customer portal (cancel, renew, change subscription) 10:35:21 - Deployment to Vercel