데브허브 | DEVHUB | 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/nextj...
Sign up for Clerk: https://go.clerk.com/BfiD7iv
Project files:
Shadcn custom theme (global.css): https://github.com/codinginflow/nextj...
Asset files: https://github.com/codinginflow/nextj...
Favicon: https://github.com/codinginflow/nextj...
Opengraph-image: https://github.com/codinginflow/nextj...
ChatGPT work experience regex: https://github.com/codinginflow/nextj...
Terms of service (tos) page: https://github.com/codinginflow/nextj...
Full source code: https://github.com/codinginflow/nextj...
⭐ 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/reactbes...
💌 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: / codinginflow
Instagram: / codinginflow
TikTok: / codinginflow
Facebook: / 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
![[악분의 일기] 정보보안의 시작은 자산 식별](https://i1.ytimg.com/vi/d224ZAGbTQ0/hqdefault.jpg)
