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

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