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-inv...
🔗 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: • Build a Notification System in Next.j...
Data Pagination with Suspense: • Pagination in React
Generate PDFs: • Generate a PDF in React
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_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: https://www.colbyfayock.com/newsletter/
🎥 What I Use: https://www.colbyfayock.com/uses
#colbyfayock #nextjs #nextjs15 #reactjs #programming #webdevelopment #clerk #xata
Watch video Build an Invoice App with Next.js 15 online without registration, duration 04 hours 34 minute 24 second in high quality. This video was added by user Colby Fayock 02 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 56,412 once and liked it 2.4 thousand people.