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:

-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

Project files:

📣 Follow Coding in Flow on social media:

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: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

[codinginflow]

If you don't have Vercel Postgres available pick "Neon" below instead.

[klhmia]

I'm half way through this monstrosity and just want to say how amazing your explanations are. It's VERY easy to follow despite being very long. Thank you for making such an in-depth and easy to follow project tutorial!

[bobobo]

I've been following your entire project on Instagram to see how it was progressing. I've already started to notice all the work you've done by watching the video. Thank you very much.

[niikk]

one of the best js teachers out there.
explains everything in so much detail with such a great level of calmness

[hemantbhonsle]

Coding in Flow you're one of the best channels ever for coding tutorials, huge respect to you man for keeping this content on YouTube for free, hope you're doing well mentally & physically. Your diet is also super awesome from what I see on Instagram. Kudos to you man 🙌

[nikolar]

I am following your channel since 2019, when I started learning android development. Now I see you are doing modern web applications and I am very interested in it. I will surely watch this one, thanks :)

[Next-Js]

Very good project, keep it up, you are an inspiration, I am always looking forward to your projects, this one I will advance it calmly, but I wanted to comment you from the beginning, a hug.

[ead]

Was really looking forward to this! Thanks a lot for uploading this Florian! ✌🏻

[M.KamelHarchaoui]

Mein Dank und mein Respekt, du hast es mit dem legendären deutschen Handwerker-Gewissenhaft gemacht.

[xCarter]

Once again, great work. You cover such a broad range of topics and provide clear explanations for everything. Out of curiosity, have you ever used Convex in any of your projects? I'd love to see a tutorial where you use Convex as a backend.

[manojkanakavel]

Thank you so much man! You're the best! I learned a lot about Saas Apps from you. I completed this project (added many modifications though) and also I used Gemini instead of OpenAI and it works like a charm. Thanks again for this awesome tutorial and Keep it up :)

[mehulparekh]

Love your videos ! Would definitely like to see something with GraphQL and Nextjs :)

[klhmia]

Wouldn't you want to store user data after a user registers with clerk, to our own database? What if clerk just suddenly stops their service or does something? I would think we want our own database collection of users to be safe and also because having that data means more value for us.

[sayankhutia]

Great work Florian! I'll start working on it soon. Thanks

[Ruan-yf]

I'm happy with your tutorial videos, but when working on them I come across pages hosted in English, which doesn't make it feasible to implement them in my country. However, it's still a great help for building a portfolio and thus working as a freelancer.

[lakshyadubey]

amazing video bro, really loved your content probably the best easy to understand and quality content on youtube, here is a small feedback - if possible, please share a figma file also, it would help a lot . Love from india ❤❤❤❤

[tomaszstec]

When I saw the stack.. I just said... Wow man! Why U read in my mind!!!

[maveryma]

Amazing! Just wow! I'm following your channel, thanks so much.

[deephousespirit]

Hahaha, your sense of humour is amazing, was laughing throughout the video😂

[flan_]

06:55:00 I'm very grateful using this tool I got hired as a toilet cleaner in Burger King !