Build an Invoice App with Next.js 15

Learn how to build and deploy a full stack Next.js 15 app with authentication, database management, transactional emails, and payments including new React 19 features like Server Actions/Functions and Optimistic UI.

⭐️ Code: https://github.com/colbyfayock/my-invoicing-app
🔗 Website: https://www.fullstacknext.dev/

🔐 Clerk: https://spacejelly.dev/clerk
💾 Xata: https://spacejelly.dev/xata
💰 Stripe: https://stripe.com/
✉️ Resend: https://resend.com/
🧰 Drizzle ORM: https://orm.drizzle.team/
🧱 shadcn/ui: https://ui.shadcn.com/

🧑‍🚀 50 React Projects: https://50reactprojects.com/

🛠️ Add More Features
Realtime Notifications with Knock: https://www.youtube.com/watch?v=nS5flwLW7Fs
Data Pagination with Suspense: https://www.youtube.com/watch?v=RlzrXSVYPIw
Generate PDFs: https://www.youtube.com/watch?v=4V5HbqYJCVI

00:00:00 – Intro
00:01:19 – Create a new Next.js 15 App
00:04:20 – Creating a Dashboard with Tailwind and shadcn/ui
00:25:00 – Adding a new Create Invoice Form
00:34:15 – Installing & Configuring Xata & Drizzle ORM
00:42:28 – Creating Table Schemas for Invoice Data
00:49:07 – Generating & Running Migrations with Drizzle Kit
00:55:26 – Adding new Invoices with Server Actions
01:05:07 – Progressively Enhanced Forms in React 19 & Next.js 15
01:20:11 – List Invoices in a DataTable
01:28:19 – Dynamic Page Routes for Invoices
01:38:24 – Catching & Handling Errors
01:43:11 – Adding Social Login with Clerk
01:47:18 – Protecting Routes with Clerk Middleware
01:52:04 – Creating a Page Layout with Site Header & Footer
02:03:46 – Building Login & Signup Pages
02:07:46 – Custom Login Page with Clerk Elements
02:13:51 – Configuring MFA (Multi-Factor Authentication)
02:21:07 – Setting Up Passwordless Auth with Passkeys
02:24:33 – Securing Server Actions with Clerk
02:27:44 – Add New User ID Column to Invoices
02:31:02 – Restricting Invoice Access by User
02:35:21 – Update Invoice Status
02:54:10 – Optimistic UI Updates in React 19
03:03:27 – Deleting Invoices
03:08:15 – Add Confirmation Modal for Deletion
03:15:29 – Creating Table Relationships for Customer Details
03:22:11 – Joining Multiple Tables for Customer Data
03:26:40 – Creating & Managing Organizations
03:31:39 – Add New Organization ID Column to Invoices
03:34:40 – Restricting Access by Organization
03:41:02 – Install & Configure Stripe
03:43:58 – Adding a Public Payment Page
03:56:29 – Creating Payment Sessions with Stripe Checkout
04:04:36 – Payment State with URL Parameters & Stripe Sessions
04:17:02 – Creating Email Templates with React
04:25:30 – Sending Transactional Emails with Resend
04:30:22 – Deploy Next.js to Vercel
04:33:51 – Outro

📺 YouTube: https://youtube.com/colbyfayock?sub_confirmation=1
🐦 Twitter: https://twitter.com/colbyfayock
📹 Twitch: https://twitch.tv/colbyfayock
✉️ Newsletter: https://www.colbyfayock.com/newsletter/

🎥 What I Use: https://www.colbyfayock.com/uses

#colbyfayock #nextjs #nextjs15 #reactjs #programming #webdevelopment #clerk #xata