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

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Kobby Fok introduces a comprehensive course on building a full-stack invoice app using Next.js 15. The app will feature invoice creation, payment processing with Stripe, database management with Zada's PostgreSQL, and authentication with Clerk. Kobby covers the use of React 19 APIs, Tailwind for styling, and deploying the app on Vercel. The course will also dive into securing the app with multi-factor authentication and notifying customers using email templates with Resend.

Build an Invoice App with Next.js 15

<p>Haven’t watched the whole thing yet, but this looks like a really solid tutorial so far.</p>
