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/

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

Anja Petry

HTML

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

Learn to build a full stack invoice app using Next.js 15, TypeScript, Tailwind, and Shaden components. The app will allow invoice creation, payment processing through Stripe, and email notifications via Resend. It leverages new React 19 APIs and uses Drizzle ORM to manage Postgres data. The app includes social login, multi-factor authentication through Clerk, and is deployed on Vercel.

Build an Invoice App with Next.js 15

<p>Thanks for sharing such an inspirational contents 😊🙌</p>


<p>What is the point learning new stuff since AI will do it for us in  the near future? I mean it doesn’t matter if it gonna do it with next 12 or 18 or whatever.</p>
