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.js wit...
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, duration hours minute second in high quality that is uploaded to the channel Colby Fayock 02 October 2024. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 84,828 times and liked it 3.1 thousand visitors.
